Question

I’m sort of new to jquery and I have a toggle type jquery piece written below. Just wondering what would be a better way to write this so it’s reusable.

It works like this.
Basically click on one of the radio amount options (they have the class ‘nOther’) then the other Amount text box is disabled. But click on the other amount radio and the textbox is enabled.

$("input[type='radio'][name='giftType'][value='Other']").click(function(){
        $("input[type='text'][name='otherAmount']").removeAttr('disabled');
});
$("input[type='radio'][name='giftType'][class='nOther']").click(function(){
        $("input[type='text'][name='otherAmount']").attr('disabled', 'disabled');
});

Clearly there is a better way to write this so i can reuse it

Something like function(‘value’, ‘class’){
…
}

Any help is greatly appreciated.

Answer 1

How about:

$('input[name="giftType"]').click(function(){
  $('input[name="otherAmount"]').attr('disabled',($(this).val() != 'Other'))
});

This checks the group of radio buttons with the name "giftType" and if the one with the value of "Other" is selected, the text box with the name "otherAmount" is disabled, else it’s not disabled. Here’s a quick jsFiddle to test.

Updated the backwards condition check (== to !=)