StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here there is the code to continue selecting and disabling all the times we want.</p> <p>First thing is to enable every option, and then look at the selected values, and disable the options which coincides with the selected values.</p> <p>These 2 steps are crucial because if you select again, the disabled values of before would continue disabled.</p> <p><strong>NEWEST VERSION</strong></p> <p>The more elegant way, where we use map() (<a href="https://stackoverflow.com/questions/749084/jquery-map-vs-each">in stackoverflow there is a good explanation about this method</a>) and filter() jquery functions to do the job. Less lines, and I think same performance or better.</p> <p><a href="http://www.jsfiddle.net/dactivo/keDDr/" rel="nofollow noreferrer">http://www.jsfiddle.net/dactivo/keDDr/</a></p> <pre><code>$("select").change(function() { $("select option").attr("disabled",""); //enable everything //collect the values from selected; var arr = $.map ( $("select option:selected"), function(n) { return n.value; } ); //disable elements $("select option").filter(function() { return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values }).attr("disabled","disabled"); }); </code></pre> <p><strong>NEW VERSION</strong></p> <p>I have edited my answer, this is my final version:</p> <p><a href="http://www.jsfiddle.net/dactivo/kNbWc/" rel="nofollow noreferrer">http://www.jsfiddle.net/dactivo/kNbWc/</a></p> <pre><code>$("select").change(function() { $("select option").attr("disabled",""); //enable everything DisableOptions(); //disable selected values }); function DisableOptions() { var arr=[]; $("select option:selected").each(function() { arr.push($(this).val()); }); $("select option").filter(function() { return $.inArray($(this).val(),arr)>-1; }).attr("disabled","disabled"); } </code></pre> <p><strong>OLD VERSION</strong></p> <p><a href="http://www.jsfiddle.net/AyxL3/" rel="nofollow noreferrer">http://www.jsfiddle.net/AyxL3/</a></p> <pre><code>$("select").change(function() { $("select option").attr("disabled",""); //enable everything DisableOptions(); //disable selected values }); function DisableOptions() { $("select option").filter(function() { var bSuccess=false; //will be our flag to know it coincides with selected value var selectedEl=$(this); $("select option:selected").each(function() { if($(this).val()==selectedEl.val()) { bSuccess=true; //it coincides we will return true; return false; // this serves to break the each loop } }); return bSuccess; }).attr("disabled","disabled"); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload