带有选中和只读复选框的简单 .prop 触发器

Question

$(function() {

  $("#all").click(function() {
    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
  });
});

ul {
  list-style: none;
  margin: 0;
}
ul > li {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<ul class="sb_dropdown">
  <li class="sb_filter">Filter your search</li>

  <li>
    <input class="chkbx" id="all" type="checkbox">
    <label for="all"><strong>Show All</strong>
    </label>
  </li>

  <li>
    <input class="chkbx checkBoxClass" id="Activated" type="checkbox">
    <label for="Activated">Activated</label>
  </li>

  <li>
    <input class="chkbx checkBoxClass" id="Deactivated" type="checkbox">
    <label for="Deactivated">Deactivated</label>
  </li>

  <li>
    <input class="chkbx checkBoxClass" id="Blocked" type="checkbox">
    <label for="Blocked">Blocked</label>
  </li>

  <li>
    <input class="chkbx checkBoxClass" id="Locked" type="checkbox">
    <label for="Locked">Locked</label>
  </li>
</ul>

简单的 .prop() 问题在这里

$("#all").click(function () {
    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
});

如何添加只读+选中，所有 .chechboxClass 都是复选框，当我单击 #all id 时，所有 checkboxClass 都变为只读选中状态。我认为 $("#all").

中缺少某些内容

Update Sorry i didn't note that $("#all") is an toggle for all checkboxes

Answer 1

查看代码内嵌注释：

$("#all").click(function() {
    $(".checkBoxClass").prop({ // Set properties of all the checkboxes having class checkBoxClass 
        'checked': true, // Set the checked property to true
        'readonly': true // Make the checkboxes readonly
    });
});

Answer 2

您可以将多个属性传递给 prop()，如下所示，checked 和 readonly 的值基于 #all 元素的选中状态，例如

$("#all").click(function() {
  $(".checkBoxClass").prop({
    checked: this.checked
      //, disabled: this.checked if it fits your need
  });

});

//to make it non editable another choice is to use disabled property if it fits your need
$(".checkBoxClass").click(function() {
  return !$("#all").is(':checked')
});

ul {
  list-style: none;
  margin: 0;
}
ul > li {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="sb_dropdown">
  <li class="sb_filter">Filter your search</li>

  <li>
    <input class="chkbx" id="all" type="checkbox" />
    <label for="all"><strong>Show All</strong>
    </label>
  </li>

  <li>
    <input class="chkbx checkBoxClass" id="Activated" type="checkbox" />
    <label for="Activated">Activated</label>
  </li>

  <li>
    <input class="chkbx checkBoxClass" id="Deactivated" type="checkbox" />
    <label for="Deactivated">Deactivated</label>
  </li>

  <li>
    <input class="chkbx checkBoxClass" id="Blocked" type="checkbox" />
    <label for="Blocked">Blocked</label>
  </li>

  <li>
    <input class="chkbx checkBoxClass" id="Locked" type="checkbox" />
    <label for="Locked">Locked</label>
  </li>
</ul>

Input.readOnly

This Boolean attribute indicates that the user cannot modify the value of the control. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).

Can HTML checkboxes be set to readonly?

Answer 3

<th><input type="checkbox" class="user"><th>

<td><input class="email" type="checkbox" value="<?php echo $object['email']; ?>"></td>

$(".user").click(function () {
    $(".email").prop('checked', $(this).prop('checked'));
});

带有选中和只读复选框的简单 .prop 触发器

Simple .prop trigger for checkbox with checked and readonly

html

jquery

onclick

twitter-bootstrap