Materializecss - 单击时带有 jQuery 的道具单选框

Question

我有 1 个单选项目，我希望它表现得像一个复选框。所以现在，它被选中了，但我无法在点击时将它绑定到道具状态。

所以我想实现的是：当点击radio 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'))
})

这是一个fiddle：https://jsfiddle.net/55L52yww/81/

Answer 1

如果您向单选元素添加状态属性，则单选按钮可以像复选框一样工作，例如：

<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>

Answer 2

当您进入由单选按钮本身触发的功能时，checked 属性的状态已经改变。这会导致第一次点击时出现问题，因为新状态是 true，因此您的函数将其设置回 false。

您可以通过在单独的 data 属性中跟踪 checked 状态并检查它来解决此问题。

$(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>

Materializecss - 单击时带有 jQuery 的道具单选框

Materializecss - prop radio checkbox with jQuery on click

javascript

jquery

materialize

prop