Materialisecss - 點擊jQuery上的prop收音機複選框

我有1個收音機項目，我希望它的行爲類似於複選框。所以現在，它被選中了，但是我不能在點擊時將它綁定到prop狀態。Materialisecss - 點擊jQuery上的prop收音機複選框

所以我想實現的是：當點擊收音機btn時，它反轉它的檢查狀態。

這裏是我的嘗試：

<form action="#"> 
    <p> 
     <input name="group" type="radio" id="test" /> 
     <label for="test">Red</label> 
    </p> 
</form> 


$(document).ready(function() { 
    $('#test').click(function() { 
     $('#test').prop('checked', !$('#test').prop('checked')) 
    }) 
})

是什麼有趣的，如果我創建另一個按鈕，並將其綁定到改變checked價值，它的工作原理

<button id="faker" type="button"> 
    Faker Btn 
</button> 

$('#faker').click(function() { 
    $('#test').prop('checked', !$('#test').prop('checked')) 
})

這裏是一個小提琴：https://jsfiddle.net/55L52yww/81/

來源

2017-07-17 senty

在第一次點擊，如果檢查你正在檢查。由於點擊事件未完成，它將一直處於未選中狀態。 –

你可以看看小提琴嗎？我嘗試過各種組合，但沒有運氣：/ – senty

它不會在點擊本身時反轉無線電廣播狀態，就像faker按鈕的做法 – senty

如果將狀態屬性添加到無線電元素中，如下所示，收音機可以表現得像複選框：

<input name="group" type="radio" id="test" data-state="false"/>

現在，您可以保存上一個狀態並與當前值進行比較，以決定要執行的操作。

的片段：

$('#test').on('click', function(e) { 
 
    var a = $(this).data('state'); 
 
    var b = $(this).prop('checked'); 
 
    if (a && b) { 
 
     b = false; 
 
     $(this).prop('checked', b); 
 
    } 
 
    $(this).data('state', b); 
 
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
 

 

 
<form action="#"> 
 
    <p> 
 
     <input name="group" type="radio" id="test" data-state="false"/> 
 
     <label for="test">Red</label> 
 
    </p> 
 
</form>

來源

2017-07-17 14:40:08 gaetanoM

啊，當我打字時，我的答案類似。偉大的思想家都認爲:) – vi5ion

當你進入的是由單選按鈕本身觸發功能，checked屬性的狀態已經改變。這會導致第一次點擊時出現問題，因爲新狀態爲true，因此您的功能會將其重新設置爲false。

您可以通過跟蹤checked狀態中的一個單獨的data屬性並檢查它來解決此問題。

$(function() { 
 
    $('#test').click(function() { 
 
    var $this = $(this); 
 
    if ($this.data('previousState')) { 
 
     $this.prop('checked',false).data('previousState',false); 
 
    } 
 
    else { 
 
     $this.prop('checked',true).data('previousState',true); 
 
    } 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
 
<form action="#"> 
 
    <p> 
 
    <input name="group1" type="radio" id="test" /> 
 
    <label for="test">Red</label> 
 
    </p> 
 
</form>

來源

2017-07-17 14:43:09 vi5ion

Materialisecss - 點擊jQuery上的prop收音機複選框

回答

相關問題