javascript - Javascript代码不起作用

Question

我有一个面板激活/停用复选框（chk1）'开/关'。该面板包含一个复选框 (chk2) 和一个单选按钮 (rbtn)。选中单选按钮 (rbtn) 时，必须禁用该复选框。当通过取消选中“开/关”复选框禁用面板时，单选按钮和复选框 (chk2) 将被禁用。问题是，当我打开启用面板的页面时，执行来自 javascript 的代码，但是当我打开禁用面板的页面时，启用面板后，当我检查单选按钮时，javascript 不起作用，因此 chk2变成了残疾人。

 $(document).ready(function (){
     $('input[id^=rbtn]').click(function () {
         SetControlEnableState($('#chk2'), $('#rbtn'));
     });
     function SetControlEnableState(controlToSet, control) {
         if (control.is(':checked')) {
            $(controlToSet).attr('disabled', 'disabled');
            alert('if');
         }
         else {
            $(controlToSet).removeAttr('disabled');
            alert('else');
        }
     }
});

当面板更新时，javascript 代码不再可用。

Answer 1

不要click在复选框上使用事件，而是在change一个：

    $('input[id^=rbtn]').change(function () {

这样你就会得到新的状态。该click事件在复选框更改之前生成。

Answer 2

而不是这个：

$(controlToSet).attr('disabled', 'disabled');

$(controlToSet).removeAttr('disabled');

做这个：

$(controlToSet).prop('disabled', true);

$(controlToSet).prop('disabled', false);

Answer 3

尝试这个

$(document).ready(function (){
    $('input[id^=rbtn]').click(function () {
        SetControlEnableState($('#chk2'), $(this));
    });
    function SetControlEnableState(controlToSet, control) {
        if (control.is(':checked')) {
            $(controlToSet).attr('disabled', 'disabled');
        } else {
            $(controlToSet).removeAttr('disabled');
        }
    }
});

Answer 4

简化整个事情：

 $(document).ready(function () {
     $('input[id^=rbtn]').change(function () {
         SetControlEnableState($('#chk2'), $('#rbtn'));
     });

     function SetControlEnableState(controlToSet, control) {
         controlToSet.prop('disabled', control.is(':checked'));
     }
 });

Answer 5

$(document).ready(function (){

            $('input[id^=rbtn]').change(function () {
                SetControlEnableState();
            });
    function SetControlEnableState() {
        if ($('#rbtn').is(':checked')) {
            $('#chk2').attr('disabled', 'disabled');
            alert('if');
        }
        else {
            $('#chk2').removeAttr('disabled');
            alert('else');
        }
    }