CODEWITHSUNDEEP
jquerycheckboxeach
Alex Chizhov
Alex Chizhov

Reputation: 179

jQuery: check / uncheck checkboxes

I have two divs. Div A and Div B. Div A contains anchors when you click on one it displays a list of checkboxes that i get from an array in Div B. I have a limit, a user can only choose three checkboxes from all the lists that he can get by clicking on anchors.

I have a limit if more than 2 then unchecked checkboxes are being disabled.

if (countShownCats > -1 && countShownCats < 3) {
     // Enable checkboxes
     $('.rbSubcategoryList input:checkbox:not(:checked)').attr('disabled', false);
  } else {
     // Disable non checked checkboxes
     $('.rbSubcategoryList input:checkbox:not(:checked)').attr('disabled', true);
  }

When i click on an anchor and it appends a list of checkboxes, checkboxes are not checked. Here's the code:

$('.rbSubcategoryList input[value="' + rbCheckboxValue + '"]').attr('checked', true);

But only first checkbox that was clicked is getting checked. I know that I have to use $.each somehow, but can't figure out how.

So my question is how do i make it work so all three checkboxes that are checked remain checked when i click on the anchor?

Thank you!

Upvotes: 0

Views: 349

Answers (1)

Colin Banbury
Colin Banbury

Reputation: 891

OK, think I've got it now.

You were not looping through the hidden inputs in .rbWwCatPicked which is why only one check box was checked.

   $('.rbWwCatPicked input[type=hidden]').each(function(){
       $('.rbSubcategoryList input[value="' + $(this).data('pickedcat-hidden') + '"]').prop('checked', true);
   });

and the updated fiddle: http://jsfiddle.net/T5858/17/

Sorry didn't read the question properly.

Try this out:

$('.rbSubcategoryList').click(function () {
  var c = $(this).find('input:checkbox:checked').length;
  if (c >= 2) {
    $(this).find('input:checkbox:not(:checked)').prop('disabled', true);
  } else {
    $(this).find('input:checkbox:not(:checked)').prop('disabled', false);
  }
});

Here's the fiddle: http://jsfiddle.net/p8zZu/

It seems there are some issues with your JavaScript as well. Check the errors logged in the console of your browser.

If I understand correctly, you're asking for assistance with the use of the each method?

Try

$('.rbSubcategoryList input[value="' + rbCheckboxValue + '"]').each(function () {
  $(this).prop('checked', true);
});

Upvotes: 1

Related Questions