javascript - 输入检查更改按钮类

Question

希望从按钮中删除禁用类并在选中单选按钮以及选中 1 个或多个复选框时添加启用类。

<div>
    <input name="select-customer" type="radio">btn 1
    <input name="select-customer" type="radio">btn 2
</div>
<div>    
    <input type="checkbox" name="choice-selection">Choice 1
    <input type="checkbox" name="choice-selection">Choice 2
    <input type="checkbox" name="choice-selection">Choice 3
    <input type="checkbox" name="choice-selection">Choice 4
</div>

https://jsfiddle.net/dLyvo7d0/

Answer 1

$(document).ready(function(){
    $('#button').click(function(){
        $('input:radio').each(function () {
            var $this = $(this);
                if (($this).prop('checked')) {
                     $this.closest('span').addClass('enable');
                     $this.closest('span').removeClass('disable');
                }else{
                     $this.closest('span').addClass('disable');
                     $this.closest('span').removeClass('enable');
                }
        });
        $('input:checkbox').each(function () {
            var $this = $(this);
                if (($this).prop('checked')) {
                     $this.closest('span').addClass('enable');
                     $this.closest('span').removeClass('disable');
                }else{
                     $this.closest('span').addClass('disable');
                     $this.closest('span').removeClass('enable');
                }
        });
    });

});

.disable {
    background: gray;
}

.enable {
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
        <span><input name="select-customer" type="radio"/>btn 1</span>
        <span><input name="select-customer" type="radio"/>btn 2</span>
    </div>
    <div>    
         <span><input type="checkbox" name="choice-selection"/>Choice 1</span>
         <span><input type="checkbox" name="choice-selection"/>Choice 2</span>
         <span><input type="checkbox" name="choice-selection"/>Choice 3</span>
         <span><input type="checkbox" name="choice-selection"/>Choice 4</span>
    </div>
            <button class="disable" id="button">Button</button>