StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You want something like this - <a href="http://jsbin.com/oqafe" rel="noreferrer">Example Code here</a></p> <pre><code>$(function() { $("input:radio[@name='abc123']").click(function() { if($(this).attr('id') == 'abc') { // Disable 123 and Enable abc $("#theOptions option[value='1']").attr("disabled","disabled"); $("#theOptions option[value='2']").attr("disabled","disabled"); $("#theOptions option[value='3']").attr("disabled","disabled"); $("#theOptions option[value='a']").attr("selected","selected"); $("#theOptions option[value='a']").attr("disabled",""); $("#theOptions option[value='b']").attr("disabled",""); $("#theOptions option[value='c']").attr("disabled",""); } else { // Disable abc's and Enable 123 $("#theOptions option[value='a']").attr("disabled","disabled"); $("#theOptions option[value='b']").attr("disabled","disabled"); $("#theOptions option[value='c']").attr("disabled","disabled"); $("#theOptions option[value='1']").attr("selected","selected"); $("#theOptions option[value='1']").attr("disabled",""); $("#theOptions option[value='2']").attr("disabled",""); $("#theOptions option[value='3']").attr("disabled",""); } }); }); </code></pre> <p><strong>EDIT:</strong></p> <p>Improved version of the code, using regular expression to filter options based on option values. <a href="http://jsbin.com/axavo" rel="noreferrer">Working example here</a>. You can edit the example by adding <code>/edit</code> to the URL</p> <pre><code>$(function() { $("input:radio[@name='abc123']").click(function() { // get the id of the selected radio var radio = $(this).attr('id'); // set variables based on value of radio var regexDisabled = radio == 'abc' ? /[1-3]/ : /[a-c]/; var regexEnabled = radio == 'abc' ? /[a-c]/ : /[1-3]/; var selection = radio == 'abc' ? 'a' : 1; // select all option elements who are children of id #theOptions $("#theOptions option") // filter the option elements to only those we want to disable .filter( function() { return this.value.match(regexDisabled);}) // disable them .attr("disabled","disabled") // return to the previous wrapped set i.e. all option elements .end() // and filter to those option elements we want to enable .filter( function() { return this.value.match(regexEnabled);}) // enable them .attr("disabled",""); // change the selected option element in the dropdown $("#theOptions option[value='" + selection + "']").attr("selected","selected"); }); }); </code></pre> <p><strong>EDIT 2:</strong></p> <p>Since the disabled attribute doesn't appear to work reliably across browsers, I think your only option is to remove the option elements not needed when a radio button is selected. <a href="http://jsbin.com/etufu" rel="noreferrer">Working Example here</a></p> <pre><code> $(function() { $("input:radio[@name='abc123']").click(function() { // store the option elements in an array var options = []; options[0] = '<option value="1">1</option>'; options[1] = '<option value="2">2</option>'; options[2] = '<option value="3">3</option>'; options[3] = '<option value="a">a</option>'; options[4] = '<option value="b">b</option>'; options[5] = '<option value="c">c</option>'; var radio = $(this).attr('id'); var regexEnabled = radio == 'abc' ? /[a-c]/ : /[1-3]/; // set the option elements in #theOptions to those that match the regular expression $("#theOptions").html( $(options.join('')) // filter the option elements to only those we want to include in the dropdown .filter( function() { return this.value.match(regexEnabled);}) ); }); }); </code></pre> <p>or even</p> <pre><code> $(function() { // get the child elements of the dropdown when the DOM has loaded var options = $("#theOptions").children('option'); $("input:radio[@name='abc123']").click(function() { var radio = $(this).attr('id'); var regexEnabled = radio == 'abc' ? /[a-c]/ : /[1-3]/; // set the option elements in #theOptions to those that match the regular expression $("#theOptions").html( $(options) // filter the option elements to only those we want to include in the dropdown .filter( function() { return this.value.match(regexEnabled);}) ); }); }); </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