JS - jQuery - Enable Disable form fields with checkbox

Question

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/

machineghost · Accepted Answer · 2014-11-09 19:07:56Z

3

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

edited Nov 9, 2014 at 19:07

answered Jun 26, 2012 at 23:08

machineghost

36k33 gold badges174 silver badges271 bronze badges

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

5 Comments

Obmerk Kronen Over a year ago

Thaks for your answers , but trying on the fiddle - it does not seem to work .

machineghost Over a year ago

I've updated my answer; can you please review my latest suggestion?

Obmerk Kronen Over a year ago

Thanks - it works great . Only thing is that when the document is loading - the function did not controlled it . I added a "disabled" attribute as default (see here : jsfiddle.net/obmerk99/6jFMf/20 ). BTW - you do know you can save the fiddle changes by clicking "update" and then post the new link here ?

user2513846 Over a year ago

shouldn't you use .prop for best code practice? $( elem ).prop( "checked" )

machineghost Over a year ago

I'm not sure if prop even existed when I wrote this answer :-) It probably did, but just hadn't become standard practice yet. Either way, I'll update my answer.

Collectives™ on Stack Overflow

JS - jQuery - Enable Disable form fields with checkbox

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related