11

I'm trying to put a checkbox in each of my accordion headings to indicate whether something should be disabled or not. The checkbox shows up fine, however, its not clickable as the whole accordion header is linked to the <a> tag. Putting the checkbox outside the <a> tag makes the checkbox appear underneath the heading, which is not what I want, and it still isn't clickable either.

<div id="accordion">
    <h3><a href="#">Text <span id="id">More text<input type="checkbox"/></span></a></h3>
    <div>content etc</div>
</div>
4
  • you want to hide checkbox also when accordion panel is disabled?
    – Pradip R.
    Sep 15, 2011 at 5:57
  • Is the problem that the checkbox won't check/uncheck or that you don't want the accordion behavior when you click it?
    – kinakuta
    Sep 15, 2011 at 5:58
  • Won't check/uncheck, the accordion behavior that you mentioned would be nice but yeah I was talking about check/uncheck not working.
    – Michael
    Sep 15, 2011 at 6:00
  • Very good question asked and good answerd too.. this is usually needed. Thanks guys
    – Ajay2707
    Apr 28, 2015 at 13:17

4 Answers 4

30

You can use stopPropagation() to fix this

example jsfiddle

something like

$('#accordion input[type="checkbox"]').click(function(e) {
    e.stopPropagation();
});
0
2

I would be taking the input control out of the hyperlink.

<h3><a href="#">Text</a><span id="id">More text<input type="checkbox"/></span></h3>
2
  • Doesn't work, as I specified in OP (forgot the <a> code before the "tag" word in my explanation).
    – Michael
    Sep 15, 2011 at 6:04
  • Ah cool...i've just never worked with an input control in a hyper link before :)
    – alistair
    Sep 15, 2011 at 6:06
2
<input type="checkbox" onclick="event.stopPropagation()" />
0

Try setting the checkbox to checked in the acordion click event, using

<input type="checkbox" name="foo" />

in the html and

$('input[name=foo]').attr('checked', true);

in the event.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.