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