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

我正试图编写一个wordpress小部件，但选项表单让我有些悲伤。该小部件旨在显示两个图像和每个图像下方的计数器，计数器依赖于日期。这种逻辑是合理的。

然而，在图像上没有计数器的情况下，我试图设置一个复选框，当选中该复选框时，将禁用处理图像和计数器的输入字段，这样我就可以读取布尔值并输出一个没有计数器的简单图像。

我遇到的问题是，附加在复选框上的JQuery正在禁用输入，但我无法再次单击它来启用它们，因为它只是锁定在边缘状态，因为复选框会发出蓝色的"辉光"，看起来没有被选中。我不明白为什么代码不能像我预期的那样工作。值得注意的是，这是我第一次使用JQuery，如果标准javascript也能做到这一点，那么解决方案就不需要是JQuery。

我有两个功能相同的部分，每个图像计数器对一个。这是其中一个部分的代码：

<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>

JQuery

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

编辑：自从发布后，我修改了代码，现在我使用id而不是类，但问题仍然存在，即使使用3ror404的解决方案

新代码：

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

我根据以下声明运行JQuery 1.11.1版本：

alert(jQuery.fn.jquery);