Question

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

这里简单.prop（）问题

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

如何添加readonly + checked，所有.chechboxClass都是复选框，当我单击#all id时，所有checkboxClass将变为使用readonly进行检查。我认为缺少$（＆＃34;＃all＆＃34;）。

更新抱歉，我没有注意到$（＆＃34;＃all＆＃34;）是所有人的切换复选框

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

此布尔属性表示用户无法修改该值控制。如果type属性的值为，则忽略它隐藏，范围，颜色，复选框，收音机，文件或按钮类型（例如按钮或提交）。

Can HTML checkboxes be set to readonly?

Answer 3

1. page "a.hmtl"
2. page "b.hmtl" and frame "b1" with page "bb.html" 
3. page "cc.html"

带有checked和readonly的复选框的简单.prop触发器

3 个答案: