Simple .prop trigger for checkbox with checked and readonly

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>

Simple .prop() problem here

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

how to add readonly + checked, all .chechboxClass is checkbox and when i click the #all id all checkboxClass is turn into checked with readonly. I think something missing in $("#all").

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

Did you try the answer below? – Arun P Johny Jul 07 '15 at 06:04 — Arun P Johny, Jul 07 '15 at 06:04

Tushar · Answer 1 · 2015-07-07T05:52:08.873

1

See the comments inline in the code:

$("#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
    });
});

edited Jul 07 '15 at 05:52

answered Jul 07 '15 at 05:51

Tushar

85,780
21
159
179

score 1 · Accepted Answer · edited May 23 '17 at 12:14

You can pass multiple properties to prop() like below, base the value of checked and readonly on the checked state of the #all element like

$("#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?

`when i click the #all id all checkboxClass is turn into checked with readonly.`. The state of `#all` has nothing to do with the other checkboxex. Atleast not mentioned. — Tushar, Jul 07 '15 at 05:53

score 1 · Answer 3 · answered Jul 07 '15 at 05:56

1

<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'));
});

answered Jul 07 '15 at 05:56

Ankit Verma

136
4
10

Simple .prop trigger for checkbox with checked and readonly

3 Answers3