Disable specific text fields with jQuery

Question

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

   }         
);

Rory McCrossan · Accepted Answer · 2011-04-13 15:45:52Z

1

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

   }         
);

answered Apr 13, 2011 at 15:45

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TehFoobar Over a year ago

Rory, I am assuming you meant to be consistent for the class name "options-group" (in reference to the HTML).

Rory McCrossan Over a year ago

I did. The jQuery closest() selector in the code relies on there always being a parent element to the input with the same class name.

TehFoobar Over a year ago

your solution looks intriguing, as does Bens. I will look into it.

Ben Dyer · Accepted Answer · 2011-04-13 15:47:30Z

1

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.

answered Apr 13, 2011 at 15:47

Ben Dyer

1,6761 gold badge12 silver badges23 bronze badges

Comments

Dr.Molle · Accepted Answer · 2011-04-13 15:52:09Z

1

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,

answered Apr 13, 2011 at 15:52

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Comments

shmeeps · Accepted Answer · 2011-04-13 15:52:20Z

1

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.

edited Apr 13, 2011 at 15:52

answered Apr 13, 2011 at 15:41

shmeeps

7,8033 gold badges31 silver badges35 bronze badges

2 Comments

Rory McCrossan Over a year ago

Dammit, halfway through typing my answer and this pops up. Looks like your selector is wrong though. Should be something more along the lines of $(this).parent().children("input[name^=enterFlowVal]").attr(...)

shmeeps Over a year ago

Yes, that's actually correct! I'll swap that out. Looks like I should have spent a bit more time on it >.<

Collectives™ on Stack Overflow

Disable specific text fields with jQuery

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related