CODEWITHSUNDEEP
jqueryhtmlradio-button
Constantinus Rebet
Constantinus Rebet

Reputation: 11

activate a dropdown list when click a radio button

I have a form and in it I have a radio button with two choices (Yes or No). After that I have a dropdown list. I want to activate the list only when the choice "Yes" is clicked and be inactivated otherwise. I have done it with JQuery. However, it doesn't work. Not only the list is not activated, but also the "Yes" value of the radio button cannot be checked!!! Below is the code:

This is the radio button:

<input type="radio" name="Married" id="MarriedYes" value="Yes" onclick="hideStudentChildren()" required>YES
<input type="radio" name="Married" id="MarriedNo" value="No" required>NO

This is the dropdown list:

<select id="selectChildrenStudent" name="ChildrenStudent" class="required"  disabled="true" required>
                            <option value="" disabled="disabled" selected>--Choose--</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                    </select>

And this is the JQuery code:

function hideStudentChildren(){
if ($("#MarriedYes").prop("checked", true)) {
    $("#selectChildrenStudent").removeAttr("disabled");
}
if ($("#MarriedYes").prop("checked", false)) {
    $("#selectChildrenStudent").attr("disabled", true);
}

}

Please any help.....thank you in advance

Upvotes: 0

Views: 4925

Answers (2)

Antony
Antony

Reputation: 171

You can do simple as below...

<input type="radio" name="Married" id="MarriedYes" value="Yes" onclick="hideStudentChildren()" required>YES
<input type="radio" name="Married" id="MarriedNo" value="No" onclick="hideStudentChildren()" required>NO

<script>
function hideStudentChildren(){
if ($("#MarriedYes").is(":checked")) {
    $("#selectChildrenStudent").removeAttr("disabled");
}
if ($("#MarriedNo").is(":checked")) {
    $("#selectChildrenStudent").attr("disabled","disabled");
}

}
</script>

Upvotes: 1

Rutunj sheladiya
Rutunj sheladiya

Reputation: 646

add same class in your radio buttons

<input class="rndMarried" type="radio" name="Married" id="MarriedYes" value="Yes" required>YES
<input class="rndMarried" type="radio" name="Married" id="MarriedNo" value="No" required>NO

$(document).delegate(".rndMarried","change",function(){
    //alert($(this).val());
    var values=$(this).val();
    if(values=="Yes") {
        $("#selectChildrenStudent").attr("disabled", true);  
    }
    else {
    $("#selectChildrenStudent").attr("disabled", false);  
    }
});

Upvotes: 0

Related Questions