JQuery one call multiple actions

Question

Based on a few jQuery performance recommendations, I discovered this functionality:

Instead of this:

$('#legendGallery).draggable({containment:'#container'}); $('#caption').draggable({containment:'#container'}); $('#controls').draggable({containment:'#container'}); 

Do it:

 $('#legendGallery, #caption, #controls').draggable({containment:'#container'}); 

(One jQuery call is applied to multiple actions)

I want to apply this concept to an array of checkboxes:

 <input type="checkbox" class="largecheckbox" name="chk_wms[]" value="m1" /> <input type="checkbox" class="largecheckbox" name="chk_wms[]" value="m2" /> <input type="checkbox" class="largecheckbox" name="chk_wms[]" value="m3" /> <input type="checkbox" class="largecheckbox" name="chk_wms[]" value="m4" /> 

In the following code I want to disable some checkboxes:

 $('input:checkbox[name="chl_wms\[\]"][value="m1"]', 'input:checkbox[name="chl_wms\[\]"][value="m2"]', 'input:checkbox[name="chl_wms\[\]"][value="m3"]).prop('disabled', true); 

But it does not work, no error and no action is applied.

Is there a better way to define a selector? Is there a way to make this command with a single call?

Thanks!

Answer 1

There seems to be a typo in your selectors. In addition, jQuery char escape is equal to \\ , and each selector should be on the same line. With this in mind, it should be:

 $('input:checkbox[name="chk_wms\\[\\]"][value="m1"], input:checkbox[name="chk_wms\\[\\]"][value="m2"], input:checkbox[name="chk_wms\\[\\]"][value="m3"]').prop('disabled', true); 

Having established that it should work.

An alternative method that will work better than an attribute selector is to use classes. For instance:

 <input type="checkbox" class="largecheckbox flag-disabled" name="chk_wms[]" value="m1" /> <input type="checkbox" class="largecheckbox flag-disabled" name="chk_wms[]" value="m2" /> <input type="checkbox" class="largecheckbox flag-disabled" name="chk_wms[]" value="m3" /> <input type="checkbox" class="largecheckbox" name="chk_wms[]" value="m4" /> ---- $(".flag-disabled").prop("disabled", "disabled"); 

Or better yet, use identifiers:

 <input type="checkbox" class="largecheckbox" id="chk_wms[m1]" name="chk_wms[]" value="m1" /> <input type="checkbox" class="largecheckbox" id="chk_wms[m2]" name="chk_wms[]" value="m2" /> <input type="checkbox" class="largecheckbox" id="chk_wms[m3]" name="chk_wms[]" value="m3" /> <input type="checkbox" class="largecheckbox" id="chk_wms[m4]" name="chk_wms[]" value="m4" /> ---- $("#chk_wms\\[m1\\], #chk_wms\\[m2\\], #chk_wms\\[m3\\]").attr("disabled", "disabled"); 

Answer 2

Maybe something is missing for me, but why can't you just do:

 $('.largecheckbox').attr('disabled', 'disabled');