Question

我有一个广播项目，我希望它的行为像一个复选框。现在，它被选中但我无法在点击时将其绑定到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/

Answer 1

如果您向无线电元素添加州属性，则无线电可以像复选框一样，如下所示：

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

现在，您可以保存最后一个状态并与当前值进行比较，以确定要执行的操作。

摘录：

＆＃13;

$('#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);
})

＆＃13;

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

＆＃13;

Answer 2

当你进入由单选按钮本身触发的函数时，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>

Materializecss - prop单选复选框，点击jQuery

2 个答案: