如何在语义中选中和取消选中复选框时动态启用和禁用按钮 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');
                 });
             });

这将添加 class（如果不存在）或将其删除（如果存在）。

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

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

how to dynamically enable and disable button when checkbox is checked and unchecked in semantic UI

javascript

checkbox

jquery

semantic-ui