Input checked attribute not working after confirm dialog cancel

Question

I have a checkbox that when unchecked I want to confirm that the user intended to do so.

I am listening to the on.change event and use confirm() for the dialog. If the user clicks "Cancel" I have code to reset the checkbox. However, it is not obeying it. The 'checked="checked"' attribute is placed there as expected, but it does not appear as checked.

Here's a JSFiddle illustrating it: https://jsfiddle.net/0tvzLbgk/9/

Below is the code.

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

Does anyone know why it's not following the checked attribute?

Use `$me.prop('checked', 'checked');` instead of `$me.attr('checked', 'checked');` — Corporalis, Dec 07 '16 at 15:58
It's worth reviewing [this](http://stackoverflow.com/a/426276/4045532) for an explanation as to why — Corporalis, Dec 07 '16 at 16:02
Thanks for the link, I had seen that earlier but `.attr()` was working everywhere else in the code so I left it. I've updated all instances of `attr()` for checked to `prop()` now though. Thanks! — David Yeiser, Dec 07 '16 at 16:10
No worries, there is a difference between properties and attributes and it is useful to know the difference as some times you will want to know the current state of something and other times you will want to access the value set in an attribute. It is worth reading through the [jquery documentation](http://api.jquery.com/attr/#svg-support) — Corporalis, Dec 07 '16 at 16:19

score 1 · Accepted Answer · answered Dec 07 '16 at 15:58

1

use .prop not .attr

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

answered Dec 07 '16 at 15:58

Denys Konoplin

362
1
9

score 1 · Answer 2 · edited May 23 '17 at 12:30

Use prop() insead of attr() since you need to change the property here not the attribute :

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

Hope this helps.

( Take a look to .prop() vs .attr() )

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

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

Input checked attribute not working after confirm dialog cancel

2 Answers2