0

このページには、1つのチェックボックス、3つのラジオボタン、および1つのボタンが含まれています。チェックボックスまたはいずれかのラジオボタンの状態を変更する場合は、有効にする必要があります。ページが読み込まれると、ボタンはデフォルトで無効になります。

以下のコードはラジオボタンでは機能しませんが、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');
        }
    });
});
4

2 に答える 2

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 に答える
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 に答える