禁用选中的字段

Disable fields on checked

我试图在选中复选框时禁用字段集中的 2 个 select 字段。我也尝试过 getElementByIdgetElementsByTagName.attr() 等方法,但它不起作用..

我希望在选中时像这样将 disabled 添加到 fieldset:

<fieldset id="test" disabled>
    <div class="col-lg-6">
        <?php echo $this->Form->input('frequency_remarks'); ?>
    </div>
    <div class="col-lg-6">
        <?php echo $this->Form->input('duration_remarks'); ?>
    </div>
</fieldset>

复选框:

<div class="checkbox">
    <label for="CommentFrequencyOk">
        <input type="hidden" name="data[Comment][frequency_ok]" id="CommentFrequencyOk_" value="0" />
        <input type="checkbox" name="data[Comment][frequency_ok]" class="checkbox" value="1" id="CommentFrequencyOk" /> Frequency
    </label>
</div>

剧本:

$('#CommentFrequencyOk').checked(function () {
    $('#test').setAttribute('disabled');
});

建议:

  1. 使用on('change')绑定事件,checked()不是有效事件
  2. 使用prop设置disabled状态
  3. 使用 checked 属性 复选框来更改 fieldset
  4. 的状态
  5. 您不能在 jQuery 对象上调用 Vanilla Javascript 方法,请使用 jQuery 方法。前任。在 $('#test')
  6. attr() 而不是 setAttribute

$('#CommentFrequencyOk').on('change', function() {
  $('#test').prop('disabled', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<fieldset id="test">
  <div class="col-lg-6">
    <input id="frequency_remarks" />
  </div>
  <div class="col-lg-6">
    <input id="duration_remarks" />
  </div>
</fieldset>

<div class="checkbox">
  <label for="CommentFrequencyOk">
    <input type="hidden" name="data[Comment][frequency_ok]" id="CommentFrequencyOk_" value="0" />
    <input type="checkbox" name="data[Comment][frequency_ok]" class="checkbox" value="1" id="CommentFrequencyOk" />Frequency
  </label>
</div>

这应该可以做到。现在您只需插入 select 字段 ID 而不是测试。

$('#CommentFrequencyOk').change(function() {
   $('#test').prop('disabled', $(this).prop('checked'));
});