I have a jQuery script that should enable an 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");
});
}
});
}
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With