Question

该页面包含1个复选框，3个单选按钮和一个按钮。如果更改了checkBox或任何单选按钮的状态，则应启用它。页面加载时，默认情况下禁用该按钮。

以下代码不适用于单选按钮，但适用于checkBox。错误在哪里？

$(document).ready(function () {

    /*The initial values of checkBox and RadioButtons they have as the page was loaded*/
    var rbl = $('#rbgList').find('input:radio:checked');
    var rblInitialValue = rbl.val();

    var chk = $('#chkHideFromAddressBook');
    var chkInitialValue = chk.is(":checked");

    var btn = $('#btnSaveConfigSettings');

    var isChanged = function () {
        return ((rbl.val() != rblInitialValue) || (chk.is(":checked") != chkInitialValue));
    };

    /*Set button the state of SaveChanges to enables/disabled that depends on of the current state (check/unchecked) of checkBox and RadioButtons*/

    /*1*/
    $('#rbgList input:radio').click(function () {
        isChanged() ? btn.attr('disabled', '') : btn.attr('disabled', 'disabled');
    });


    /*2*/
    $("#chkHideFromAddressBook").click(function () {
        isChanged() ? btn.attr('disabled', '') : btn.attr('disabled', 'disabled');
    });

})

但这个效果很好

$(document).ready(function () {

    /*The initial values of checkBox and RadioButtons they have as the page was loaded*/
    var rblInitialValue = $('#rbgList').find('input:radio:checked').val();
    var chkInitialValue = $('#chkHideFromAddressBook').is(":checked");


    $('#rbgList input:radio').click(function () {
        if (
                ($('#rbgList').find('input:radio:checked').val() != rblInitialValue) ||
                ($('#chkHideFromAddressBook').is(":checked") != chkInitialValue)
            ) {
            $('#btnSaveConfigSettings').attr('disabled', '');
        }
        else {
            $('#btnSaveConfigSettings').attr('disabled', 'disabled');
        }
    });



    $("#chkHideFromAddressBook").click(function () {
        if (
                ($('#rbgList').find('input:radio:checked').val() != rblInitialValue) ||
                ($('#chkHideFromAddressBook').is(":checked") != chkInitialValue)
            ) {
            $('#btnSaveConfigSettings').attr('disabled', '');
        }
        else {
            $('#btnSaveConfigSettings').attr('disabled', 'disabled');
        }
    });
});

Answer 1

问题在于：

var rbl = $('#rbgList').find('input:radio:checked');
var rblInitialValue = rbl.val();

虽然该代码在语法方面很好，但当您检查其他单选按钮时，rbl不会更新，因此此测试结果为：

(rbl.val() != rblInitialValue)

将始终评估为false。

当值更改时，您需要获取对已检查单选按钮的新引用，以便您将当前选中的单选按钮的值与最初选中的单选按钮的值进行比较。对现有代码的修改最少的是：

$('#rbgList input:radio').click(function () {
    rbl = $(this);
    isChanged() ? btn.attr('disabled', '') : btn.attr('disabled', 'disabled');
});

Answer 2

我知道你并没有要求一个完整的解决方案，但是我没有立即修复它。无论如何它在这里。

小提琴

http://jsfiddle.net/UHXf2/2/

JS

$(document).ready(function() {

    var originalindex = -1;
    var originalcheck = -1;
    var button;
    var check;

    function getindex() {
        return $('input[name=sex]:checked', '#myform').index();
    }

    function getcheck() {
        return check.is(':checked');
    }

    function validateform() {
        if (getindex() == originalindex && getcheck() == originalcheck) {
            button.attr('disabled', true);
        } else {
            button.removeAttr('disabled');
        }
    }

    button = $('input[name=submit]', '#myform');
    check = $('input[name=alien]', '#myform');

    originalindex = getindex();
    originalcheck = getcheck();

    $('input[name=sex]', '#myform').change(function() {
        validateform();
    });
    check.change(function() {
        validateform();
    });

});

HTML

<form id="myform">
 <input type="radio" name="sex" value="m" checked="true" /> Male<br />
 <input type="radio" name="sex" value="f" /> Female<br />
 <input type="radio" name="sex" value="o" /> Other<br />
 <input type="checkbox" name="alien" value="h" checked="false" /> Human<br/>
<input type="submit" name="submit" value="submit" disabled="true" />
</form>

jQuery并设置按钮的状态

2 个答案:

小提琴

JS

HTML