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/

Answers


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

Use a combonation of the .not() function and :disabled selector to exclude these.

$(':checkbox[class='+ $(this).data('checkbox-name') + ']').not(':disabled').prop("checked", $(this).prop("checked"));
$(':checkbox[class='+ $(this).data('checkbox-name') + ']').not(':disabled').trigger("change");

.not() also exists as a selector as :not() and could be used as follows:

 $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked"));
 $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').trigger("change");

Here is what I usually do:

$(function(){
    $(".selectall").live('change', function(){
        if($(this).is(":checked"))
        {
            $("input:checkbox:not(:disabled)." + $(this).data('checkbox-name')).prop("checked", "true");
        }
        else
        {
            $("input:checkbox:not(:disabled)." + $(this).data('checkbox-name')).prop("checked", "false");
        }
    });
});

I hope it helps :)


This does not do the same as your original code. It would only trigger change for those that was not changed. I've assummed you wished to trigger change for all the once you changed

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

Need Your Help

How to manually trigger validation with jQuery validate?

javascript jquery html jquery-validate

I want to manually trigger validation including showing error messages with jQuery Validate.

Project not Built in Active Configuration - Xamarin/Xamarin.Form

xamarin xamarin.forms

I have downloaded Xamarin.Form sample projects from github https://github.com/xamarin/xamarin-forms-samples