5

最近、多くのチェックボックスを使用しています。クリックイベントでこの「問題」に遭遇し、.prevenDefault()これに対する解決策を見つけようとしました。私の場合、他のフィールドに従ってチェックボックスをオン/オフできるかどうかを判断できるようにしたかったのです。イベントが発生する前に、ダイアログを開かなければならないこともありました。これは実際よりも簡単に聞こえました...

この jsFiddle では、問題の内容と、それをどのように解決しようとしたかを確認できます (以下のコードも参照してください)。ほとんどの回答は、クリックの代わりに変更を使用することを暗示しています。しかし、あなたが使用することはできません.preventdefault()。

$('div').off('change','.wtf').on('change', '.wtf', function(e) {
    //e.preventDefault();
    //return false;
    if($(this).prop('checked') == true) {
        alert('I am true now, but I must stay false');
        $(this).prop('checked', false);
    }
    else {
        alert('I am false now, but I must stay true');
        $(this).prop('checked', true);
    }
});

これが最善の解決策ですか？または、状態の変更が許可されるまでチェックボックスを待機させる他の方法はありますか?

例: ユーザーが [OK] をクリックしてダイアログのメッセージに同意する場合にのみ、チェックボックスをオフにしたいと思います。

4

2 に答える 2

10

チェックボックスは、チェックボックスをクリックすることでも発生するため、changeイベント とclickが互いに置き換えられる特殊なケースです。change event

clickつまり、との唯一の大きな違いchangeは の使いやすさです.preventDefault()。クリック以外の方法でチェックボックスの値を変更する場合は、change イベントの方が適しています。

この場合は、好きな方を選択してください。例は次のとおりです。ここでフィドル

$('input[type="checkbox"]').on('change', function () {
    var ch = $(this), c;
    if (ch.is(':checked')) {
        ch.prop('checked', false);
        c = confirm('Do you?');
        if (c) {
            ch.prop('checked', true);
        }
    } else {
        ch.prop('checked', true);
        c = confirm('Are you sure?');
        if (c) {
            ch.prop('checked', false);
        }
    }
});
于 2013-04-25T11:21:17.547 に答える