Disable Checkbox depending on state of another checkbox

Question

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

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

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

</form>

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!

Answer 1

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.

jQuery(function($){

    /**
     * Once the document is ready, initialise the 'checkResponses' object
     */
    $(document).ready(function(){
        checkResponses.init();
    });

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

        /**
         * Psuedo constructor
         */
        init : function(){
            this.create_events();
            this.maybe_disable_first_option_required();
        }, // init

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

            var t = this;   // This object

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

        }, // create_events

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

            if($('input[name=first_option_show]').is(':checked')){
                alert('Removing...');
                $('input[name=first_option_required]').removeAttr('disabled');
            } else {
                alert('Adding...');
                $('input[name=first_option_required]').attr('disabled', true);
            }

        } // maybe_disable_first_option_required

    }

});

Answer 2

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

if($("input[name=first_option_show]").not(":checked")){
  $("input[name=first_option_required]").attr("disabled",true);
}