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收音机复选框

回答

相关问题