Question

我正在尝试编写一个wordpress小部件，但选项形式给了我一些悲伤。小部件旨在显示两个图像和计数器依赖于日期的计数器下方的计数器。这个逻辑是有序的。

然而，在图像上没有计数器的情况下，我试图放一个复选框，当检查时将禁用处理图像和计数器的输入字段，所以我可以jsut读取布尔值并输出更简单的图像，没有计数器。

我遇到的问题是附加到复选框的JQuery禁用了输入，但我无法再次单击它以启用它们，因为它只是锁定其状态，因为复选框获得蓝色'发光'并且看起来没看。我不明白为什么代码没有像我期望的那样工作。值得注意的是，这是我第一次使用JQuery，如果标准的javascript可以做同样的解决方案，则解决方案不需要是JQuery。

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

<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被选中时被禁用，如果未选中则会被启用（？）。所以这应该有效：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: