如何在语义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>