Radio buttons to enable/disable fields

Question

I have a form with several groups of radio buttons. Selecting a radio button will enable the text field against it and disable the rest. I cant get the field enabled. I have already tried almost every function (next, nextAll, nextUnit, find, findAll, closest ...) but probably not using them properly.

Here is a test with only one group of buttons: http://jsfiddle.net/QTseK/

Also on page load some of the radio buttons are already checked and what I have to run to get the rest (not checked fields) disabled ?

Thanks

Answer 1

As your elements have class attributes, you can select them using class selector, for enabling/disabling form elements, you can use the prop method.

$("body").on("click", "input[type='radio']", function() {
    $('.fieldSelector').prop('disabled', true);
    $(this).closest('tr').find('.fieldSelector').prop('disabled', false)
});

http://jsfiddle.net/AfRdj/

Answer 2

jsFiddle

$("body").on("click", "input[type=radio]", function() {
   $(this).closest("table").find("input[type=text]").prop("disabled", true);
    $(this).closest("tr").find("input[type=text]").prop("disabled", false);

});​

You can add/modify the selectors based on your HTML.

In addition, I am not sure that I would put the event listener on the body. I think that I would prefer something like this if the elements are in the DOM throughout the page life cycle. (Are the elements in question on the page initially?)

$("input[type=radio]").on("click", function() {//you can change input[type=radio] to any other selector that you have already used
   $(this).closest("table").find("input[type=text]").prop("disabled", true);
    $(this).closest("tr").find("input[type=text]").prop("disabled", false);

});​