CODEWITHSUNDEEP
javascriptjqueryformsselectradio-button
user1850722
user1850722

Reputation: 41

disable select form if radio is checked

How can I disable a select form dropdown if a radio button is selected?

I would like the #preference form to be disabled if the user selects the #no radio button and it to be enabled again if the user selects #yes or #maybe.

This is my form code - 

<form name="xmas" id="xmas" action="send_mail.php" method="post">
            <input type="radio" name="choice" value="Yes" id="yes"/><label for="yes">Yes - I would like to take up the offer</label>
            <input type="radio" name="choice" value="No" id="no"/><label for="no">No - I'm not ready to order yet</label>
            <input type="radio" name="choice" value="Maybe" id="maybe"/><label for="maybe">Maybe - I'm not sure, would you please give me a call</label><br />
            <div class="secondlineform">
                <input type="text" name="name" class="textfield" value="Name" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
                <input type="text" name="email" class="textfield" value="Email" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
                <input type="text" name="company" class="textfield" value="Company" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
                <select class="dropselect" name="preference" label="Preference" id="preference">
                    <option selected="selected" disabled="disabled" value="Preference">Preference</option>
                    <option value="Alcohol Package">Alcohol Package</option>
                    <option value="Gift Card Package">Gift Card Package</option>
                </select>
                <input type="submit" value="" name="submit" id="submit" class="submit"/>

            </div>
        </form>

And this is my script code - 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

​ 

  var update_select = function () {
    if ($('#no').is(':checked')) {
    $('#preference').attr('disabled', "disabled");
}
else {
    $("#preference").removeAttr("disabled");
}

};

$(update_select);
$('#no').change(update_select);

</script>

Thanks very much for any answers! I've been researching this for ages and all the solutions I find don't seem to solve my issue.

Upvotes: 4

Views: 2427

Answers (4)

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

Wrap your radio button list by an ul and give it an ID.

For example:

        <ul id="offer">
        <input type="radio" name="choice"  value="Yes" id="yes"/><label for="yes">Yes - I would like to take up the offer</label>
        <input type="radio" name="choice"  value="No" id="no"/><label for="no">No - I'm not ready to order yet</label>
        <input type="radio" name="choice"  value="Maybe" id="maybe"/><label for="maybe">Maybe - I'm not sure, would you please give me a cal
        l</label><br />
        </ul>

var update_select = function () {
    if ($('#no').is(':checked')) {
        $('#preference').attr('disabled', "disabled");
    }
    else {
        $("#preference").removeAttr("disabled");
    }
};
$(update_select);
$('#offer').change(update_select);

And it will work

Upvotes: 0

Boris Gappov
Boris Gappov

Reputation: 2493

$('input[type=radio]').change(update_select);​

Upvotes: 2

djakapm
djakapm

Reputation: 175

You need to apply the update_select function to the rest of the radio button,like this

var update_select = function () {
$('#preference').attr('disabled', $('#no').is(':checked'));
};


$('#no').change(update_select);
$('#yes').change(update_select);
$('#maybe').change(update_select);

Here is the fiddle: http://jsfiddle.net/QXkhM/

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

you are adding change event for only No radio, change it to :

$("input[name='choice']").change(update_select);

Demo:: jsFiddle

Upvotes: 2

Related Questions