jquery: check and disable checkbox on checking another checkbox

Question

I have some divs. Each of them contains two checkbox (each checkbox is in a div of a same class 'class3'). I would that when the user checks the first checkbox, the second one is checked and disabled. I've tried with :

 $('.class1').live('click', function () {
var n = $(this).siblings('input:checkbox');
if ($(this).attr('checked')) {
    n.attr('disabled', true); 
} else {
    n.attr('disabled',false);
} 
return false;
});

In this way the two checkbox are enabled, but when I click on the first one, the check doesn't appear and nothing happens.

 <div class="elements">
 <div class="class3">
 <input class="class1" type="checkbox" value="1" name="first" id="first" />
 </div>
 <div class="class3">
 <input class="class2" type="checkbox" value="1" name="second" id="second" />
 </div>
 </div>

It is not ('disabled', true). Change it to ('disabled', 'disabled') — madhairsilence
– madhairsilence, Commented Jun 28, 2012 at 8:26
@madhairsilence .prop('disabled', true) is perfectly correct, as per the examples in the jQuery documentation — Anthony Grist
– Anthony Grist, Commented Jun 28, 2012 at 8:29
@madhairsilence Actually, my mistake - I thought the code in the question was using .prop(), but it's (incorrectly) using .attr(), in which case it may very well be .attr('disabled', 'disabled'). Though, again, they should be using .prop() instead. — Anthony Grist
– Anthony Grist, Commented Jun 28, 2012 at 8:33
@Anthony Grist: I think the problem is also how I select the elements: I'll edit the question to add the html. — Sefran2
– Sefran2, Commented Jun 28, 2012 at 8:43

Me.Name · Accepted Answer · 2012-06-28 09:58:34Z

1

You can attach an event to each first checkbox of divs of class1 by using something like:

  $('.class1 input:first-child').live('change', function () {

(I've used change instead of click because it's a bit more generic. ) Only attaching the first element and not the entire div makes sure you only react when needed.

Futher the disabling as you have used it should work, but siblings will only work if your first checkbox is not nested inside another element (e.g. a Paragraph)

Example fiddle: http://jsfiddle.net/Zqz63/

edit Seeing the html in your updated post , siblings will indeed not work, you could look up in the parents chain to find the .elements div and look down for there for checkboxes (other than the selected)

 var n = $(this).parents('.elements').find('input:checkbox').not(this);

jsfiddle is unresponsive, so I've moved the sample to jsbin: http://jsbin.com/ahemet/3/edit (NB, in the current jsbin version there is no proper selection of only the first checkbox, so the event will also fire on the 2nd checkbox, but I reckoned that was outside the scope of your question)

edit 2 Using the information that class1 is always the first checkbox and class2 always the second:

$('input:checkbox.class1').live('change', function () {

  var n = $(this).parents('.elements').first().find('input:checkbox.class2');

  if ($(this).attr('checked')) {
      n.attr('checked',true);
      n.attr('disabled', true);
  } else {
      n.attr('disabled',false);
  }
});

test: http://jsbin.com/ahemet/4/edit

edited Jun 28, 2012 at 9:58

answered Jun 28, 2012 at 8:45

Me.Name

12.6k3 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anthony Grist Over a year ago

The .class1 element is the checkbox, so the event handler should only apply to that one element.

Sefran2 Over a year ago

The only problem is that also other checkboxes in div 'elements' are disabled. How could I disable and check only the second when the first is checked?

Me.Name Over a year ago

@Anthony Absolutely true, if the use case is such that it applies only to .class1 checkboxes the OP could use $('input:checkbox.class1').live('change',... But the original text states multiple divs with 2 checkboxes, so the example reoccurs, but I'm not sure whether they'll be class1 based on the information.

Me.Name Over a year ago

@Cricket Was just posting my answer to Anthony's comment at the same time :) So the scenario is even different :D The entire sample was based on the idea that all other checkboxes were disabled. Can you confirm that what Anthony suggested is viable: to explicitly bind to class1 textboxes? Following that: is the second checkbox always class2? That could extremely simplify the scenario

Sefran2 Over a year ago

@Me.Name: the first checkbox is always class1 and the second checkbox is always class2, while the other checkboxes are of different classes

|

Dave · Accepted Answer · 2012-06-28 08:29:42Z

0

$('.class1').live('click', function () {
    var n = $(this).siblings('input:checkbox');
    if ($(this).attr('checked')) {
        n.prop('disabled', true); 
    } else {
        n.prop('disabled', false);
    } 
});

edited Jun 28, 2012 at 8:29

answered Jun 28, 2012 at 8:23

Dave

3,6311 gold badge24 silver badges25 bronze badges

2 Comments

Anthony Grist Over a year ago

"Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead." jQuery API - .removeProp()

Dave Over a year ago

@AnthonyGrist Of course, you're correct; I've obviously mixed up my attr() vs prop() syntaxes. Answer changed to reflect this.

Anthony Grist · Accepted Answer · 2012-06-28 08:34:25Z

0

When you return false; you prevent the default behaviour of that event from occurring; in the case of clicking on a checkbox, the default behaviour is checking the checkbox. Simply remove the return false; as it does nothing positive for you.

In addition, disabled is a property of an element, so you should be using the .prop() function to set/modify its value, not the .attr() function.

edited Jun 28, 2012 at 8:34

answered Jun 28, 2012 at 8:23

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Collectives™ on Stack Overflow

jquery: check and disable checkbox on checking another checkbox

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related