0

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

下面的代码不适用于单选按钮，但适用于复选框。错误在哪里？

$(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');
        }
    });
});
4

2 回答 2

1

我知道你并没有要求一个完整的解决方案，但我在修复它时偏离了方向。反正就是这里。

小提琴

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>​
于 2012-06-18T15:16:59.310 回答
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');
});
于 2012-06-18T14:20:36.187 回答