单选按钮禁用Html.textbox

Question

I have 2 radio buttons Billable "Y" & Billable "N". They are connected to a database of values "Y" or "N".

If Radio = "Y" then TextBox NonBillableReason needs to be disabled.

If Radio = "N" then TextBox NonBillableReason needs to be disabled.

The js. that I have works fine on page load I get the proper behavior depending on the Radio value "Y" or "N". The problem is I cannot seem to click Radio buttons and change the disabled, true (or) disabled, false.

<label><span>YES</span>@Html.RadioButtonFor(model => model.Billable, "Y")   </label>
<label><span>NO</span>@Html.RadioButtonFor(model => model.Billable, "N")

@Html.TextBoxFor(model => model.NonBillableReason,new {@class = "form-control", @placeholder = "NOT BILLABLE BECAUS..."})

<script>
    $(document).ready(function () {

    if ($("#Billable:checked").val() == "Y") {
        $("#NonBillableReason").attr("disabled", true);
    }

    if ($("#Billable:checked").val() == "N") {
        $("#NonBillableReason").attr("disabled", false);
    }
});
</script>

Answer 1

Since you are using jQuery, you can add a change event on the radio buttons and change disable the NonBillableReason element after that:

function validate() {
    if ($("#Billable:checked").val() == "Y") {
        $("#NonBillableReason").attr("disabled", true);
    }

    if ($("#Billable:checked").val() == "N") {
        $("#NonBillableReason").attr("disabled", false);
    }
}
$(document).ready(function () {
    validate();
    $('input').change(validate);
});

Answer 2

try

 if($('#radio_button').is(':checked')) 
{ 
 $("#NonBillableReason").attr("disabled", true); 
 }
else 
{
   $("#NonBillableReason").attr("disabled", false); 
}