Question

I have to elements radio button and text field:

<label><input id="GRP010" type="RADIO" value ="900">Radio button</label>
    <input id="AF92" maxlength="254" size="15" name="AF92">

I want using jquery to disable text field, but enable it when the radio button is checked and value is equal.

So far I have wrote this:

$(document).ready(function(){

    var value2 = $('input:radio[name="GRP010"]').val();
    var checked2 = $('input:radio[name="GRP010"]').is(':checked');

    if (checked2 == true && value2 == '900') {
        $("#AF92").attr("enabled", "enabled");
    } else {
        $("#AF92").attr("disabled", "disabled"); 
    }
});

However, the text field is disable and not enabled if I select the radio button. How to I achieve this? Thanks

Answer 1

There is no attribute called enabled it is only disabled, to use it do this

$("#AF92").attr("disabled","disabled"); // will disable
$("#AF92").removeAttr("disabled"); // to enable

You also have other problems. First, you are trying to target your input by the wrong attribute name="GRP010 which does not exist, since you have an id just use that. Also, you don’t have an event handler to change the status of the input once the radio button changes, see the live fiddle

Also, it would be better to start the input as disabled.

Here is the event handler

$('#GRP010').on('change', function(){
var checked = this.checked;

    if(checked && value2 == '900')
        $("#AF92").removeAttr("disabled");
    else
        $("#AF92").attr("disabled","disabled");
})