0

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/

Obmerk Kronen
  • 15,619
  • 16
  • 66
  • 105

1 Answers1

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);
    })
});
machineghost
  • 33,529
  • 30
  • 159
  • 234
  • Thaks for your answers , but trying on the fiddle - it does not seem to work . – Obmerk Kronen Jun 26 '12 at 23:15
  • I've updated my answer; can you please review my latest suggestion? – machineghost Jun 26 '12 at 23:42
  • 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 : http://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 ? – Obmerk Kronen Jun 27 '12 at 00:37
  • shouldn't you use .prop for best code practice? $( elem ).prop( "checked" ) – user2513846 Nov 09 '14 at 17:23
  • 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. – machineghost Nov 09 '14 at 19:06