如何在复选后禁用复选框复选框

Question

创建了两个复选框。如果选中任何一个复选框，则另一个复选框自动进入禁用模式，如果未选中，则进入正常模式。 但是我的代码在某些情况下不起作用。

<div>                  
    <label>First checkbox</label>
    <input class="myCheckbox classA" data-target="maindiv1" type="checkbox" name="first" id="first_box"/>
</div>

<div>
    <label>Second checkbox</label>
    <input class="myCheckbox classB" data-target="maindiv2" type="checkbox" name="second" id="second_box"/>
</div>

脚本代码

$(document).on('click', '.classA', function (e) {
    if ($('.classA:checked').length) {
        $('.classB').prop('disabled', true);
        $('.classB').prop('checked', false);
        return;
    }
    $('.classB').prop('disabled', false);
});

$(document).on('click', '.classB', function (e) {
    if ($('.classB:checked').length) {
        $('.classA').prop('disabled', true);
        $('.classA').prop('checked', false);
        return;
    }
    $('.classA').prop('disabled', false);
});