Optimization of a jquery dom explorer code

Question

How do I to make this code work with a better performance, please ?

Rules :

If the option[value='admin'] is selected, check all the checkboxes. If not, uncheck them all.
If a checkbox is checked, change its value to true, if not to false.
If .gestionSupervision && .gestionSupervision2 are checked, check all checkboxes and select option[value='admin'].
If .gestionSupervision && .gestionSupervision2 are unchecked, select option[value='sei'].
If .gestionSupervision is checked, .gestionSupervision2 must be.
If .gestionSupervision is unchecked, .gestionSupervision2 must be.
If .gestionSupervision2 is checked, .gestionSupervision must be.
If .gestionSupervision2 is checked, .gestionSupervision must be.

Please note the hidden checkbox.

Not looking up selectors $(".gestionSupervision2") multiple times will help (lookup once & store a reference) — Alex K., Feb 17 '14 at 14:07
See point 5 @ http://www.sitepoint.com/efficient-jquery-selectors/ — Alex K., Feb 17 '14 at 14:12
Nope, you should be able to find out yourself with the hinted buzzwords :-) Try it, then ask again. If you want a general feedback you might post your code at [codereview.SE]. See possible duplicates [jQuery - Improving Performance / Code](http://stackoverflow.com/questions/4700097/jquery-improving-performance-code), [jQuery Optimization/Best Practices](http://stackoverflow.com/questions/3230727/jquery-optimization-best-practices) and [jQuery pitfalls to avoid](http://stackoverflow.com/questions/1229259/jquery-pitfalls-to-avoid) — Bergi, Feb 17 '14 at 14:14

Paolo Tozzo · Answer 1 · 2014-02-17T15:06:32.320

0

First, you can save your selector in a variable like this:

var gestionSupervision2 = $(".gestionSupervision2");

So you'll be able to refer to it, avoiding to query the DOM every time

Then you can also set all properties in one selector using:

gestionSupervision2.prop({
                    'checked', true,
                    ...
 });

Remember to remove the attribute disable for actually enabling the element:

$('.gestionSuperVision2').removeAttr("disabled").

You'll end up with something like:

    $(".gestionSupervision2").prop({'checked': true,value:'true'}).removeAttr("disabled");

jquery will do the rest for you behind the scenes. Hope this will help.

edited Feb 17 '14 at 15:06

answered Feb 17 '14 at 14:42

Paolo Tozzo

Yes it does, and thank you so much for your response !! But, does the code work with that? – ABCmo Feb 17 '14 at 14:44
Can you please show me the result in jsfiddle, because I have [edited it as you mentioned](http://jsfiddle.net/Eg4eV/2/), but, with any succes result. – ABCmo Feb 17 '14 at 14:50
To be sure that your code works, try to write into jsFiddle, and then share the result. Because, when I add what you've mentioned, this wouldn't work. I am grateful for your effort. – ABCmo Feb 17 '14 at 15:04
ah, sorry, can't do it now, I'll do it in a couple of hours, but what I can see is that you have some lines where you set disable with different values in the same selector like $(".gestionSupervision2").prop( 'disabled', false, 'checked', false, 'disabled', true, 'checked', false ); – Paolo Tozzo Feb 17 '14 at 15:09

1 Answers1