Question

Reading several guidelines for jQuery performance I discovered this functionality:

Instead of doing:

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

Do this:

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

(One call to the jQuery engine several actions applied)

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" />

With the following code I want to disable several 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’s not working, no error and no action applied.

Is there a better way to define the selectors?
Is there a way to do that command using one single call?

Thanks!

Answer 1

There appears to be a typo in your selctors. Plus, the jQuery escape char is \\, and each selector should be in one string. With that 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);

By fixing that it should work.

An alternative method which would perform better than the attribute selector would be to use classes. Eg:

<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 even better yet, use Ids:

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