CODEWITHSUNDEEP
jqueryformsradio-button
hbowman
hbowman

Reputation: 307

use jquery to toggle disabled state with a radio button

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>

Upvotes: 1

Views: 2862

Answers (3)

Anthony Accioly
Anthony Accioly

Reputation: 22461

First, initialize checked and disabled status properly in your HTML (since they are static, there is no reason to do it with JavaScript). 

<input type="radio" id="aircraftType" name="aircraft" checked="checked" />
<!-- other stuff -->
<select size="6" multiple="multiple" id="aircraftModelSelect" 
      name="aircraftModel" disabled="disabled">

Second, in order to reduce LOCs you can take advantage of the fact that select.id = radio.id + 'Select':

  • aircraftType -> aircraftTypeSelect
  • aircraftModel -> aircraftModelSelect

So, if you know the radio id ($(this).attr('id')) you can simple disable all the other selects but the one related with this radio (this would also work if there were more than two radios / selects).

$(document).ready(function() {
    $('input[name="aircraft"]').click(function() {
        $('select[name^="aircraft"]').attr('disabled', 'disabled');
        $('#' + $(this).attr('id') + 'Select').removeAttr('disabled');
    });
});

I'm selecting the radio buttons by name, but you can simple go with [type="radio"] if there is only this group of radios in your document, or even combine the two selectors according to your needs.

This reduces the amount of LOCs by more than 50%.

Working fiddle.

Upvotes: 1

noob
noob

Reputation: 9202

@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

Upvotes: 1

Jim H.
Jim H.

Reputation: 5579

Change your checked attribute in the radio button to checked="checked", then remove the first two lines from your $(document).ready().

The only thing you need to do there is disable the proper list and add your click handlers.

I tested the updated fiddle http://jsfiddle.net/gQrk2/ in IE, Chrome, and FF.

Upvotes: 1

Related Questions