如何使用 jQuery Mobile 制作禁用复选框？

如果你正在使用 jQuery Mobile 来构建你的网页或应用程序，你可能需要禁用一些复选框来防止它们被用户随意更改。本文将向你展示如何使用 jQuery Mobile 来制作禁用复选框。

禁用单个复选框

要禁用单个复选框，你可以将 disabled 属性设置为 true。

<fieldset data-role="controlgroup">
  <legend>选择:</legend>
  <input type="checkbox" name="checkbox-1" id="checkbox-1" checked>
  <label for="checkbox-1">选项 1</label>
  <input type="checkbox" name="checkbox-2" id="checkbox-2" disabled>
  <label for="checkbox-2">选项 2</label>
  <input type="checkbox" name="checkbox-3" id="checkbox-3">
  <label for="checkbox-3">选项 3</label>
</fieldset>

如上所示，将第二个复选框的 disabled 属性设置为 true，这会禁用该复选框。

禁用多个复选框

如果你需要禁用多个复选框，你可以使用 jQuery 的 .prop() 方法。

首先，为选择器定义一个变量，该选择器将匹配需要禁用的复选框。然后使用 .prop() 方法将这些复选框的 disabled 属性设置为 true。

<fieldset data-role="controlgroup">
  <legend>选择:</legend>
  <input type="checkbox" name="checkbox-1" id="checkbox-1" checked>
  <label for="checkbox-1">选项 1</label>
  <input type="checkbox" name="checkbox-2" id="checkbox-2">
  <label for="checkbox-2">选项 2</label>
  <input type="checkbox" name="checkbox-3" id="checkbox-3">
  <label for="checkbox-3">选项 3</label>
  <input type="checkbox" name="checkbox-4" id="checkbox-4">
  <label for="checkbox-4">选项 4</label>
</fieldset>

<script>
  // 选择需要禁用的复选框
  var checkboxes = $("#checkbox-2, #checkbox-3, #checkbox-4");
  checkboxes.prop("disabled", true);
</script>

如上所示，使用 $() 函数选择需要禁用的复选框，然后使用 .prop() 方法将这些复选框的 disabled 属性设置为 true。

结论

以上是使用 jQuery Mobile 制作禁用复选框的简单介绍。无论你需要禁用一个复选框还是多个复选框，都可以使用以上的方法来实现。