0

偽の（しかし美しい）チェックボックスを本物のチェックボックスにバインドしようとしています。最初はすべてを選択できますが、選択を解除することはできません。偽のチェックボックスを何回クリックしても、コンソールには常に true と表示されます。

$('.checkbox').click(function(){
        if($(this).prev().prev().prop('checked')==true){
            $(this).prev().prev().prop('checked',false);
            console.log($(this).prev().prev().prop('checked'));
            $(this).removeClass('checkbox_checked');
            $(this).addClass('checkbox_clear');
        }
        else {
            $(this).prev().prev().prop('checked',true);
            console.log($(this).prev().prev().prop('checked'));
            $(this).removeClass('checkbox_clear');
            $(this).addClass('checkbox_checked');
            }
    });

どんなアイデアでも大歓迎です。

PS: これが html です。

<input data-val="true" data-val-required="The isChecked field is required." id="5_1" name="options[1].isChecked" value="true" type="checkbox"> 

<input name="options[1].isChecked" value="false" type="hidden">       

<label class="checkbox" for="5_1">Spring</label>
4

1 に答える 1

2

問題は、LABEL がチェックボックスを true または false に設定することです。あなたはまた、チェックボックスのチェックをtrueまたはfalseに設定しています。あなたはそれをする必要はありません！ブラウザにチェックをさせてください!! あなたがそれを真にさせているので、それは常に真です。

その prev() のものはすべて恐ろしく見えます。私は個人的にはIDを使用するだけです。

$(document).on("click","label.checkbox", function() {
    var label = $(this);
    var isChecked = !$("#" + label.attr("for")).prop("checked");  //does not get checked until after label is fully clicked, hence the !
    label.toggleClass("checked", isChecked);
});

JSFiddle: http://jsfiddle.net/4ZKFS/

于 2013-09-20T07:21:24.520 に答える