Checkbox with ajax issue for select or unselect issue

Question

I have checkbox code in html below format

<label class="checkbox-inline">
  <input type="checkbox" name="category[]" value="1" data-id="1" class="categorychk" checked="checked">Men                    
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="category[]" value="2" data-id="2" class="categorychk" checked="checked">Women                    
</label>

On ajax success response I doing following jquery code it will work fine.

$.each(data, function(index,value) {
      $(".categorychk[data-id="+value+"]").attr("checked",true);
});

But issue is before call I clear all checked marks and then apply above code. But it does not work.

When I add following code after ajax call

$(".categorychk").each(function(){
     $(this).removeAttr("checked");
});

Note : If apply above code without clear checked marks then working fine with the previous checked checkbox.

Downvoter please comment for down vote. If you do not understand my question then let me ask. — Sadikhasan, Jul 25 '16 at 12:34
wasn't me who downvoted...but I'm not entirely clear either. which bit doesn't work, the ".each" loop, or the "clear all checked marks" code (which you haven't shown)? — ADyson, Jul 25 '16 at 12:35
`$(".categorychk[data-id="+value+"]").attr("checked",true);` should be `$(".categorychk[data-id="+value+"]").prop("checked",true);` — Praveen Kumar Purushothaman, Jul 25 '16 at 12:36
@ADyson When I add `removeAttr` code then do not work above mentioned code. — Sadikhasan, Jul 25 '16 at 12:38

gaetanoM · Answer 1 · 2016-07-25T12:40:05.050

1

As documented in how do i check uncheck a checkbox input or radio button you need to use jQuery prop:

$(".categorychk[data-id="+value+"]").prop('checked', true);

And to filter elements by data-id you can use:

$(".categorychk").filter(function() {
      return $(this).data('id') == value;
});

edited Jul 25 '16 at 12:40

answered Jul 25 '16 at 12:37

gaetanoM

41,594
6
42
61

This code work fine But when I put `removeAttr` code before this line then it do not work. – Sadikhasan Jul 25 '16 at 12:39
Thank you @gaetanoM I used `.prop` and solved – Sadikhasan Jul 25 '16 at 12:43

score 1 · Accepted Answer · answered Jul 25 '16 at 12:39

Ok. You're trying to do stuff with attributes, when you should be using properties. Read http://api.jquery.com/attr/, specifically the section entitled "attributes vs properties".

In the meantime, your code will work if you change

$(".categorychk").each(function(){
 $(this).removeAttr("checked");
});

to

$(".categorychk").prop("checked", false);

(N.B. you don't need to .each() this, it will operate on all the selected items automatically).

and change

$(".categorychk[data-id="+value+"]").attr("checked",true);

to

$(".categorychk[data-id="+value+"]").prop("checked",true);

Note the use of .prop() instead of .attr()

Thank you @ADyson I used `.prop` and solved my issue. – Sadikhasan Jul 25 '16 at 12:44 — Sadikhasan, Jul 25 '16 at 12:44

Checkbox with ajax issue for select or unselect issue

2 Answers2