javascript - Exclude disabled checkboxes when using Select All - Stack Overflow

admin管理员组

文章数量:1402350

I have checkboxes with labels in table. I have added one checkbox outside the table "Select All" with id "chkbox". Now the below code is working fine. It is Selecting and Deselecting all the checkboxes in the table. Now there are some pages where some checkboxes are disabled due to business logic. I want these checkboxes should not be affected.

<script type="text/javascript">
var s = jQuery.noConflict();
s(document).ready(function() {
    s('#chkbox').change(function() {
        var all = s('table').find('input[type="checkbox"]');
        if (this.checked) {
            all.prop('checked', true);
        } else {
            all.prop('checked', false);
        }
    });
});
</script>

I have checkboxes with labels in table. I have added one checkbox outside the table "Select All" with id "chkbox". Now the below code is working fine. It is Selecting and Deselecting all the checkboxes in the table. Now there are some pages where some checkboxes are disabled due to business logic. I want these checkboxes should not be affected.

<script type="text/javascript">
var s = jQuery.noConflict();
s(document).ready(function() {
    s('#chkbox').change(function() {
        var all = s('table').find('input[type="checkbox"]');
        if (this.checked) {
            all.prop('checked', true);
        } else {
            all.prop('checked', false);
        }
    });
});
</script>

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Feb 11, 2016 at 7:35 Tushar 87.3k2121 gold badges163163 silver badges181181 bronze badges asked Feb 11, 2016 at 7:18 NidaNida 1,70233 gold badges3636 silver badges7575 bronze badges 1

• 3 have you tried s('table').find('input[type="checkbox"]:enabled') – Cerlin Commented Feb 11, 2016 at 7:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Use :not() with :disabled selector.

var all = $('table').find('input[type="checkbox"]:not(:disabled)');
                                                 ^^^^^^^^^^^^^^^^

This will not select the disabled checkboxes

$('#selectAll').change(function() {
  $(':checkbox:not(:disabled)').prop('checked', this.checked);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" id="selectAll" />Select All

<ul>
  <li>
    <input type="checkbox" disabled />
  </li>
  <li>
    <input type="checkbox" />Not disabled</li>
  <li>
    <input type="checkbox" />Not disabled</li>
  <li>
    <input type="checkbox" disabled />
  </li>
  <li>
    <input type="checkbox" />Not disabled</li>
</ul>

---

You can also use :enabled selector.

$('table').find('input[type="checkbox"]:enabled')

$('#selectAll').change(function() {
  $(':checkbox:enabled').prop('checked', this.checked);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" id="selectAll" /> Select All

<ul>
  <li>
    <input type="checkbox" disabled />
  </li>
  <li>
    <input type="checkbox" />Not disabled</li>
  <li>
    <input type="checkbox" />Not disabled</li>
  <li>
    <input type="checkbox" disabled />
  </li>
  <li>
    <input type="checkbox" />Not disabled</li>
</ul>

Note that: :enabled == :not(:disabled)

本文标签： javascriptExclude disabled checkboxes when using Select AllStack Overflow