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

我正试图写一个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>

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

新代码：

<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 1.11.1版：

alert(jQuery.fn.jquery);

---

如果我理解正确，如果选中了

#rand1

，您希望禁用

.ani1

中的所有输入，如果未选中，则启用（？）。因此，这应该是可行的：

$（'#rand1'）。在（'change'，function（）上{
var isChecked=$（this.prop（'checked'）；//这将等于'true'或'false'。。。
$（'div.ani1 input'）.attr（'disabled'，isChecked）；/…这意味着我们可以使用它的值来设置'disabled'属性
});

动画1

复选框变量的标签


标签



...
我看到该代码在示例中起作用，但在我的选项页面上似乎不起作用。复选框现在可以正确选中，但现在不会禁用它们。您使用的是哪个版本的JQuery？不知道，当您安装随我提供的webmatrix版本时，wordpress安装了什么打开浏览器开发工具并检查。当您的at刚刚编辑、添加了jquery版本和调试语句时，还要检查控制台中的错误。Chrome控制台上没有错误。如果
警报（已检查）不起作用，则更改事件不会触发。您确定
rand1
是正确的
ID
？如果将
alert（$（'#rand1'）.length）
添加到文档就绪块，会发出什么警报？我确信它的id正确。alert（$（'#rand1'）.length）输出1-这在上下文中意味着什么，因为我无法想象复选框的长度。length指的是选择器返回的元素数组的大小。所以这个元素肯定存在。您是否将上述代码包装在jquery“document ready”块中？假设jquery（function（$）{code}是一个document ready块，是的
$('#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 
});

alert(jQuery.fn.jquery);