javascript - 如何在语义 UI 中选中和取消选中复选框时动态启用和禁用按钮

Question

当在语义 UI 中选中和取消选中复选框时，如何动态启用和禁用按钮，我花了很多时间来做到这一点。

这是 html

<div class="ui fitted checkbox">
<input type="checkbox" > <label></label>
</div>
<div class="ui small positive disabled button" id="edit">
<i class="edit icon"></i> Edit
</div>

这是我的 JavaScript

<script>
    $(document).ready(function () {
                    if (
                    $('#cek').checkbox({
                        onChecked: function () {
                        }
                    })) {
                        $('#edit').removeClass('disabled');
                    } else {
                        $('#edit').addClass('disabled');       
                    }
                });
</script>

请帮忙，这让我发疯。

Answer 1

使用toggleClass()喜欢

 $(document).ready(function() {
             $('[type="checkbox"]').change(function() {
                     $('#edit').toggleClass('disabled');
                 });
             });

如果该类不存在，则添加该类；如果存在，则将其删除。

$(document).ready(function() {
      $('[type="checkbox"]').change(function() {
         
          $('#edit').toggleClass('disabled');
        });
      });

.disabled {
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="ui fitted checkbox">
  <input type="checkbox" />
  <label></label>
</div>
<div class="ui small positive disabled button" id="edit">
  <i class="edit icon"></i> Edit
</div>