Question

I have 2 radio buttons and 2 input fields. I want to associate a radio button with an input field, so only the selected radio button’s input field is enabled and others are disabled.

My html markup is:

<div>
    <input type="radio" checked="checked" name="co" data-for="s" />
    <input type="text" id="s" />
    <br /><br />

    <input type="radio" name="co" data-for="u"/>
    <input type="text" id="u" disabled="disabled" />
</div>

So currently the first radio button is checked, and its input field is enabled. How can I do this with a bit of jquery code?

EDIT

I tried this:

$("input[type=radio][name=co]").bind({
  change: function () { 
    if ($(this).attr("checked") == "checked")
       $("#" + $(this).attr("data-for")).removeAttr("disabled"); 
    else 
       $("#" + $(this).attr("data-for")).attr("disabled", "disabled"); 
  } 
});

Answer 1

Try this – http://jsfiddle.net/DMasH/

$("input:radio").on("click", function() {
    $("input:text").attr("disabled", true);

    $(this).next("input").attr("disabled", false)
});