Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable specific text fields with jQuery

Tags:

jquery

php

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");
                });
            }
        }); 

   }         
);
like image 656
TehFoobar Avatar asked Jun 08 '26 05:06

TehFoobar


1 Answers

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");
                });
            }
        }); 

   }         
);
like image 152
Rory McCrossan Avatar answered Jun 10 '26 17:06

Rory McCrossan