user1488434 user1488434 - 6 months ago 17
jQuery Question

Jquery select all if not disabled

I am using the following script to select all checkboxes with a given class.

$(document).ready(function(){ // 1
// 2
$(':checkbox.selectall').on('click', function(){
// 3
$(':checkbox[class='+ $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));
$(':checkbox[class='+ $(this).data('checkbox-name') + ']').trigger("change");
});

});


However I'm having a problem as the de/select all checkbox is able to de/select checkboxes which are disabled.

I tried this

$(document).ready(function(){ // 1
// 2
$(':checkbox.selectall').on('click', function(){
// 3
$(':checkbox[class='+ $(this).data('checkbox-name') + !$(:disabled) + ']').prop("checked", $(this).prop("checked"));
$(':checkbox[class='+ $(this).data('checkbox-name') + !$(:disabled) + ']').trigger("change");
});

});


But it does not work. I have made a jsfiddle to showcase the problem http://jsfiddle.net/e67Fv/

Answer

Hm... interresting attempt, but you can't use a jQuery object inside a selector, as the selector is just a plain string.

The selector for excluding the disabled elements would be :not(:disabled), so your code should be:

$(document).ready(function(){
  $(':checkbox.selectall').on('click', function(){
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked"));
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').trigger("change");
  });
});

Note that you can chain calls, so you don't have to select the items twice:

$(document).ready(function(){
  $(':checkbox.selectall').on('click', function(){
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked")).trigger("change");
  });
});