jQuery - 复选框启用/禁用 - 与 DB

Question

我想在yii2中实现问题的解决方案：jQuery - checkbox enable/disable，只是逆向结合DB。反转意味着：我有一些复选框，如果选中 irep 复选框，则应禁用所有其他复选框，否则应启用它们。所以我交换了$("input.irep").attr("disabled", true); 和$("input.irep").removeAttr("disabled");。

irep 存储在 db 中（作为 bool/tinyint 值 1），如果我打开表单，即使我添加 @987654326，应该禁用的字段仍将启用@给它。如果我删除 else 它几乎可以，但取消选中不会重新启用其他复选框。你能指出我正确的方向吗？谢谢。

表格：

$script = <<< JS

$(function() {
  enable_cb();
  $("#irep").click(enable_cb);
});

function enable_cb() {
  if (this.checked) {
    $("input.irep").attr("disabled", true);
  } else {
    $("input.irep").removeAttr("disabled");
  }
}

JS;
$this->registerJs($script);

<?= $form->field($model, 'irep')->checkbox(['id' => 'irep']) ?>
<?= $form->field($model, 'intfg')->checkbox(['class' => ['irep'], 'disabled' => $model->irep]) ?>
<?= $form->field($model, 'extfg')->checkbox(['class' => ['irep'], 'disabled' => $model->irep]) ?>

Answer 1

使用.prop 而不是.attr 请参阅here 为什么

仅当$model->irep 为1 时才添加disabled 属性，您添加属性的方式该值无关紧要，属性应该存在或者它不应该是1 或0使用disabled 时该值将无效。

那你为什么在加载脚本的开头调用enable_cb()，你正在使用这个函数来处理#irep上的点击事件this.checked函数内部的检查没有效果使用独立调用函数的页面加载将有 this 指向 window 对象而不是复选框。

避免使用.click，而更喜欢.on('click' 来代替事件委托。

您的代码应如下所示

$script = <<< JS
$(function(){
    $("#irep").on('click',enable_cb);
});

function enable_cb() {
  if (this.checked) {
    $(".irep").prop("disabled", true);
  } else {
    $(".irep").prop("disabled",false);
  }
}
JS;

$this->registerJs($script);

//add disabled attribute
$disabled = $model->irep ? 'disabled' : '';

<?= $form->field($model, 'irep')->checkbox(['id' => 'irep']) ?>
<?= $form->field($model, 'intfg')->checkbox(['class' => ['irep'], $disabled=>'']) ?>
<?= $form->field($model, 'extfg')->checkbox(['class' => ['irep'], $disabled =>'']) ?>