如果选中复选框，则将一组输入字段设置为禁用

Question

I'm trying to write a wordpress widget but the options form is giving me some grief. The widget is designed to show an two images and a counter beneath each where the counter relies on the date. That logic is sorted.

However in a case where there is to be no counter on an image, i'm trying to put a checkbox which when checked will disable the input fields dealing with the image and counter so i can jsut read a boolean and output a simpler image with no counter.

The problem I'm having is that the JQuery that's attached to the checkbox is disabling the inputs, but i can't click it again to enable them as it just locks in its state of limbo as the checkbox gains a blue 'glow' and doesn't look checked. I don't get why the code isn't working as i expect. It's worth noting that this is my first time using JQuery, and the solution doesn't need to be JQuery if standard javascript can do the same.

I have 2 sections which will be identical in functionality, one for each image-counter pair. this is the code for one of those sections:

<h3>Anime 1</h3>
    <p>
        <input class="check1" type="checkbox" <?php checked($instance['s1rand'], 'on'); ?> id="rand1" name="<?php echo $this->get_field_name('s1rand'); ?>" /> 
        <label for="<?php echo $this->get_field_id('s1rand'); ?>">Label of your checkbox variable</label>
    </p>
<div class="ani1">
<p>
<label for="<?php echo $this->get_field_id('s1title'); ?>"><?php _e('Anime 1 Name:', 'wp_widget_plugin'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('s1title'); ?>" name="<?php echo $this->get_field_name('s1title'); ?>" type="text" value="<?php echo $s1title; ?>" />
</p>

<p>
<label for="<?php echo $this->get_field_id('s1date'); ?>"><?php _e('Anime 1 Start Date:', 'wp_widget_plugin'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('s1date'); ?>" name="<?php echo $this->get_field_name('s1date'); ?>" type="date" value="<?php echo $s1date; ?>" />
</p>
</div>

The JQuery

jQuery(function($){

  $(document).on('click', '#rand1', function(evt){
    checked = $('#rand1').val();
    $('div.ani1 :input').attr('disabled',checked);
    return false;
  });
});

EDIT: Since posting i have altered the code so that i now work with ids rather than classes, but the problem persists, even when using 3rror404's solution

New code:

<h3>Anime 1</h3>
<p>
    <input class="check1" type="checkbox" <?php checked($instance['s1rand'], 'on'); ?> id="rand1" name="<?php echo $this->get_field_name('s1rand'); ?>" /> 
    <label for="rand1">Label of your checkbox variable</label>
</p>
<div id="ani1">
<p>
    <label for="s1title"><?php _e('Anime 1 Name:', 'wp_widget_plugin'); ?></label>
    <input class="widefat" id="s1title" name="<?php echo $this->get_field_name('s1title'); ?>" type="text" value="<?php echo $s1title; ?>" />
</p>
<p>
    <label for="s1date"><?php _e('Anime 1 Start Date:', 'wp_widget_plugin'); ?></label>
    <input class="widefat" id="s1date" name="<?php echo $this->get_field_name('s1date'); ?>" type="date" value="<?php echo $s1date; ?>" />
</p>
</div>

JQuery

$('#rand1').on('change',function() {
  var isChecked = $(this).prop('checked'); // this will equate to either 'true' or 'false'...
  alert(isChecked); //this line doesn't work, which makes me think this function isn't working
  $('#ani1 input').attr('disabled',isChecked); // ...meaning that we can use its value to set the 'disabled' attribute 
});

I'm running JQuery version 1.11.1 according to the following statement:

alert(jQuery.fn.jquery);

Answer 1

If I understand correctly, you want all of the inputs within .ani1 to be disabled if #rand1 is checked and enabled if not checked(?). So this should work:

 $('#rand1').on('change',function() { var isChecked = $(this).prop('checked'); // this will equate to either 'true' or 'false'... $('div.ani1 input').attr('disabled',isChecked); // ...meaning that we can use its value to set the 'disabled' attribute }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h3>Anime 1</h3> <p> <input class="check1" type="checkbox" id="rand1" name="" /> <label for="rand1">Label of your checkbox variable</label> </p> <div class="ani1"> <p> <label for="input1">label</label> <input class="widefat" id="input1" type="text" /> </p> <p> <label for="input2"></label> <input class="widefat" id="input2" type="date" /> </p> ... </div>