Question

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>

Answer 1

@Jim H. yes that is true but he can also do this with javascript…

The first problem is that you don’t set checked to something (like Jim H. said above)

The second problem is that you removed the attribute checked from an element with the same name after you added it to another element (this will remove the attribute on the first element too)

$("#aircraftModel").removeAttr("checked"); //place this first
$("#aircraftType").attr("checked", "checked"); //and then this

Look here