Disable specific text fields with jQuery

I have a jQuery script that should enable an 开发者_StackOverflow社区associated text-field if a person clicks the radio "yes" button, and disable that text field if a person clicks the "no" radio button. The issue I am having is every text-field in every row will become disabled/enabled AND value set to 0 by clicking on only the first pair of yes/no radio buttons.

I need to figure out how disable and assign the 0 value to a text-field specifically associated with the radio buttons assigned to it.

Here is the HTML for 3 example rows

Yes <input name="getFlow1" type="radio" value="1"  />
No  <input name="getFlow1" type="radio" value="0" checked />
<input name="enterFlowVal1" id="enterFlowVal1" value="0" size="7" type="text" disabled="disabled"/>

Yes <input name="getFlow2" type="radio" value="1"  />
No  <input name="getFlow2" type="radio" value="0" checked />
<input name="enterFlowVal2" id="enterFlowVal2" value="0" size="7" type="text" disabled="disabled"/>

Yes <input name="getFlow3" type="radio" value="1"  />
No  <input name="getFlow3" type="radio" value="0" checked />
<input name="enterFlowVal3" id="enterFlowVal3" value="0" size="7" type="text" disabled="disabled"/>

Here is the jQuery, which works to a certain extent, but is wrong.

$(document).ready(function (){  
        $("input[name^=getFlow]").(function(i){
            if (i == 1) { //the "no" radiobutton
                $(this).click(function () {
                    var zero = 0;                   
                    $("input[name^=enterFlowVal]").attr("disabled", "disabled");
                    $("input[name^=enterFlowVal]").val(zero);                       
                });
            } else {
                $(this).click(function () {
                    $("input[name^=enterFlowVal]").removeAttr("disabled");
                });
            }
        }); 

   }         
);

Personally I'd amend your markup slightly to make this task much easier. Adding a parent tag of some description allows you to limit the available inputs.

<div class="option-group">
    Yes <input name="getFlow1" type="radio" value="1"  />
    No  <input name="getFlow1" type="radio" value="0" checked />
    <input name="enterFlowVal1" id="enterFlowVal1" value="0" size="7" type="text" disabled="disabled"/>
</div>

<div class="option-group">
    Yes <input name="getFlow2" type="radio" value="1"  />
    No  <input name="getFlow2" type="radio" value="0" checked />
    <input name="enterFlowVal2" id="enterFlowVal2" value="0" size="7" type="text" disabled="disabled"/>
</div>

Then in the jQ:

$(document).ready(function (){  
        $("input[name^=getFlow]").(function(i){
            if (i == 1) { //the "no" radiobutton
                $(this).click(function () {
                    var zero = 0;                   
                    $(this).closest(".option-group").children("input[name^=enterFlowVal]").attr("disabled", "disabled");
                    $(this).closest(".option-group").children("input[name^=enterFlowVal]").val(zero);                       
                });
            } else {
                $(this).click(function () {
                    $(this).closest(".option-group").children("input[name^=enterFlowVal]").removeAttr("disabled");
                });
            }
        }); 

   }         
);

Could you try selecting the text input using next():

$(this).click(function(){
    var zero = 0;
    $(this).next('input[type^=text]').attr('disabled','disabled');
    $(this).next('input[type^=text]').val(zero);
});

Haven't tested it, but something like that should only apply any attribution changes to the next text field, not all of them.

Try

$(this).nextAll("input[name^=enterFlowVal]").first()

instead of

$("input[name^=enterFlowVal]")

if you cannot change the markup. If you can change it, I would prefer the suggestions above that are using a common ancestor,

Probably the easiest way to do it would be to wrap each "set" of inputs in a containing div, like

<div>
    Yes <input name="getFlow1" type="radio" value="1"  />
    No  <input name="getFlow1" type="radio" value="0" checked />
    <input name="enterFlowVal1" id="enterFlowVal1" value="0" size="7" type="text" disabled="disabled"/>
</div>

then use something like

$(document).ready(function (){  
    $("input[name^=getFlow]").(function(i){
        if (i == 1) { //the "no" radiobutton
            $(this).click(function () {
                var zero = 0;                   
                $(this).parent().children("input[name^=enterFlowVal]").attr("disabled", "disabled");
                $(this).parent().children("input[name^=enterFlowVal]").val(zero);                       
            });
        } else {
            $(this).click(function () {
                $(this).parent("input[name^=enterFlowVal]").removeAttr("disabled");
            });
        }
    }); 

   }         
);

Essentially, the parent function will find the parent of the Input, which should be the idea, which will limit your selection to only inputs with the name enterFlowVal in that parent div. You may need to modify this a bit.