Question

我有一个复选框，当取消选中时，我想确认用户是否打算这样做。

我正在收听on.change事件并使用confirm()作为对话框。如果用户点击“取消”，我有代码重置复选框。但是，它不服从它。 'checked =“checked”'属性按预期放置在那里，但它不会显示为已选中。

这是一个说明它的JSFiddle： https://jsfiddle.net/0tvzLbgk/9/

以下是代码。

$('#box').on('change', 'input', function() {
  var $me = $(this);

  if (this.checked) {
    // Item has been checked, do nothing
  }
  else {
    // Item has been unchecked

    // Make sure it was not an accident
    var confirmReset = confirm("Reset checkbox?");

    if (confirmReset == true) {
      // Okay, reset
    }
    else {
      // Mistake, mark as checked again
      $me.attr('checked', 'checked');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <input type="checkbox" />
</div>

有谁知道为什么它不遵循checked属性？

Answer 1

使用.prop not .attr

$ me.prop（'checked'，true）;

Answer 2

使用prop() attr()的{{1}}，因为您需要在此处更改属性而不是属性：

$me.prop('checked', 'checked');

希望这有帮助。

（看看.prop() vs .attr()）

＆＃13;

$('#box').on('change', 'input', function() {
  var $me = $(this);

  if (this.checked) {
    // Item has been checked, do nothing
  }
  else {
    // Item has been unchecked

    // Make sure it was not an accident
    var confirmReset = confirm("Reset checkbox?");

    if (confirmReset == true) {
      // Okay, reset
    }
    else {
      // Mistake, mark as checked again
      $me.prop('checked', 'checked');
      $me.addClass('shift-input');
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <input type="checkbox" />
</div>

＆＃13;

确认对话框取消后，输入检查属性不起作用

2 个答案: