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

Question

我正在尝试编写一个 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 而不是类，但问题仍然存在，即使使用 3rror404 的解决方案

新代码：

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

Answer 1

如果我理解正确，您希望 .ani1 中的所有输入在选中 #rand1 时禁用，如果未选中则启用 (?)。所以这应该有效：

$('#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>