I'm trying to disable a checkbox depending on the state of another checkbox.

<form action="options.php" method="post" id="form_submission">
            <td width="200px">
                <label for="first_option"><?php _e('First Option:', 'my_plugin'); ?></label>
                <input type="checkbox" name="first_option_show" value="show" <?php echo (get_option('first_option_show')=="show" ? 'checked' : '');?>>
                <input type="checkbox" name="first_option_required" value="required" <?php echo (get_option('first_option_required')=="required" ? 'checked' : '');?>>

        <input type="submit" name="submit" value="Save Settings">


So what I want in the script above, when the "first_option_show" is NOT checked I need the "first_option_required" to be disabled (whatever state the state of the "first_option_required" is check or unchecked, I don't clear the data in the DB).

I need this to run On Load of the page too, because as you can see the state of the "checkbox" come from the options.

I know it's probably an easy one, but I cannot get my head around it.

I was used to work with Javascript and make check of different values, but now that I work with PHP and html, I can't get it to work.

Just to make sure I give more information, the following will be in the Admin Area, it's for a plugin development, this is for a field in a different form, one option says if the field will be "showing" in the page form and the other one if the field will be required, which is why, if the field is not showing I want to disable the option if the "required" field.

Thanks in Advance!

2 Answers 2


This may be a little overkill for you needs, but I use a bulked up version of this to great effect on my site.

This script will -

  • Check what state the first_option_required option shold be in on page load (and set)

  • Change the state of the first_option_required button upon changes to the first_option_show option. This is managed via an event hadler that will capture changes to the first_option_show option

Double check the input names are correct for your needs and then paste the code in to any JS file that is accessible by the page for which you reqire this functionality.

Note - If you don't already have a JS file that is included and require help enquing on, let us know.


     * Once the document is ready, initialise the 'checkResponses' object

     * Monitor the change is state to user responses in my form
    checkResponses = {

         * Psuedo constructor
        init : function(){
        }, // init

         * Create events required for monitoring
        create_events : function(){

            var t = this;   // This object

            $('input[name=first_option_show]').on('change', function(){

        }, // create_events

         * Check to see if the 'first_option_required' options should be disabled or not
        maybe_disable_first_option_required : function(){

            } else {
                $('input[name=first_option_required]').attr('disabled', true);

        } // maybe_disable_first_option_required



The state of checkbox you can know only with JavaScript. In jQuery it could be look like this:

  • And where should I input this inside my script?
    – pSyToR
    Jan 23, 2015 at 9:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.