CODEWITHSUNDEEP
javascriptjqueryforms
Obmerk Kronen
Obmerk Kronen

Reputation: 15949

JS - jQuery - Enable Disable form fields with checkbox

I want to disable an input Box AND a button when a checkbox is clicked .

My markup :

<h4>Random or Not </h4>

    <!-- Use Random Image -->  

    <label><input name="o99_aufu_options[o99_aufu_random]" id="o99_aufu_options[o99_aufu_random]" value="1" checked="checked" type="checkbox">Use Random Image ? <em></em></label><br>  

    <!-- If the above not checked - needs to be enabled -->                         
    Upload Image <label for="upload_image"> <input id="upload_image" size="36" name="o99_aufu_options[o99_aufu_upload_image]" value="" type="text"> <input id="upload_image_button" value="Choose Image or upload" type="button"> </label>

jQuery :

if (jQuery('#o99_aufu_options[o99_aufu_random]').is(':checked')) {
       jQuery('#upload_image :input').attr('disabled', true);
    } else {
        jQuery('#upload_image_button,#upload_image :input').removeAttr('disabled');
    }

well - obviously, if i am asking here - it is not working :-)

Fiddle :

http://jsfiddle.net/obmerk99/6jFMf/3/

Also as a bonus question - is it possible to do that only with the NAME of the input, omitting the ID from the markup ?

UPDATE I - working solution :

http://jsfiddle.net/obmerk99/6jFMf/20/

Upvotes: 0

Views: 1188

Answers (1)

machineghost
machineghost

Reputation: 35730

bonus question - is it possible to do that only with the NAME of the input, omitting the ID from the markup ?

You can use any attribute in a jQuery selector, including name:

$('[name="foo"])

Since your names have brackets, you'll probably have to escape them:

$('[name="o99_aufu_options\[o99_aufu_random\]"]')

You can also qualify them to specific elements if you want, or combine them with other selectors:

$('input.someClass[name="o99_aufu_options\[o99_aufu_random\]"]')

As for your actual question, my first guess ... is wrong is that your problem is whitespace; have you tried:

#upload_image:input

instead?

My second guess is also wrong that the problem is:

.prop('disabled', true);

Have you tried:

.prop('disabled', 'disabled');

?

Ok, I actually looked at your fiddle, and there were a few things wrong; here's a working example, let me know if you have questions, but hopefully it's self-explanatory:

jQuery(function() {
    jQuery('input[name="o99_aufu_options\[o99_aufu_random\]"]').click(function(){
        var isChecked = jQuery(this).is(':checked') ;
        jQuery('#upload_image:input').prop('disabled', isChecked? 'disabled' : null);
    })
});

Upvotes: 3

Related Questions