use jquery to toggle disabled state with a radio button
- by hbowman
I want to toggle two radio buttons and select fields based on which radio button is selected. I have the jQuery working, but want to know if there is a way to make it more efficient. Seems like quite a few lines for the simple goal I am trying to achieve. Here are the requirements:
when the page loads, #aircraftType should be checked and #aircraftModelSelect should be grayed out (right now, the "checked" is being ignored by Firefox).
If the user clicks either #aircraftType or #aircraftModel, the opposite select field should become disabled (if #aircraftModel is checked, #aircraftTypeSelect should be disabled, and vise versa). Any help on optimizing this code is appreciated.
Code is up on jsfiddle too: http://jsfiddle.net/JuRKn/
$("#aircraftType").attr("checked");
$("#aircraftModel").removeAttr("checked");
$("#aircraftModelSelect").attr("disabled","disabled").addClass("disabled");
$("#aircraftType").click(function(){
$("#aircraftModelSelect").attr("disabled","disabled").addClass("disabled");
$("#aircraftTypeSelect").removeAttr("disabled").removeClass("disabled");
});
$("#aircraftModel").click(function(){
$("#aircraftTypeSelect").attr("disabled","disabled").addClass("disabled");
$("#aircraftModelSelect").removeAttr("disabled").removeClass("disabled");
});
HTML
<div class="aircraftType">
<input type="radio" id="aircraftType" name="aircraft" checked />
<label for="aircraftType">Aircraft Type</label>
<select size="6" multiple="multiple" id="aircraftTypeSelect" name="aircraftType">
<option value="">Light Jet</option>
<option value="">Mid-Size Jet</option>
<option value="">Super-Mid Jet</option>
<option value="">Heavy Jet</option>
<option value="">Turbo-Prop</option>
</select>
</div>
<div class="aircraftModel">
<input type="radio" id="aircraftModel" name="aircraft" />
<label for="aircraftModel">Aircraft Model</label>
<select size="6" multiple="multiple" id="aircraftModelSelect" name="aircraftModel">
<option value="">Astra SP</option>
<option value="">Beechjet 400</option>
<option value="">Beechjet 400A</option>
<option value="">Challenger 300</option>
<option value="">Challenger 600</option>
<option value="">Challenger 603</option>
<option value="">Challenger 604</option>
<option value="">Challenger 605</option>
<option value="">Citation Bravo</option>
</select>
</div>
