JQuery script for one checkbox selection from group not working while adding a checkbox dynamically

Question

i'm using the below jquery script to disable user from selecting more than 1 check box of same name at a time

 $("input:checkbox").click(function () {
    if ($(this).is(":checked")) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});

And here is the check boxes

 <div class="ChekMarkWrap">
  <input id="chkFilm_4" type="checkbox" name="four" style="margin-left:2px;" /><br />ﬁlm
 </div>

 <div class="ChekMarkWrap">
  <input id="chkTv_4" type="checkbox" name="four" /><br />tv
 </div>

 <div class="ChekMarkWrap">
  <input id="chkWeb_4" type="checkbox" name="four" /><br />web
 </div>

 <div class="ChekMarkWrap">
  <input id="chkStage_4" type="checkbox" name="four" /><br />stage
 </div>

It works well and good until i add a new check box dynamically.i'm binding the above jquery script on document.ready()

Why not use the <radio> element, which is designed to do this? — Nicklas Nygren
– Nicklas Nygren, Commented Aug 12, 2013 at 15:59

Nicklas Nygren · Accepted Answer · 2013-08-12 07:57:22Z

3

Fiddle: http://jsfiddle.net/3hcFp/2/

That method binds the click event only once, so elements added after that code has been run will not have the event bound. What you need to do is set up a listener instead, like so:

$('body').on('click', 'input:checkbox', function () {
    // Do some stuff
}

In the fiddle, i have wrapped the checkboxes in a form#exampleForm, and replaced body in the above example with that.

EDIT: Updated fiddle with live example of adding more checkboxes.

edited Aug 12, 2013 at 7:57

answered Aug 12, 2013 at 7:50

Nicklas Nygren

2,60515 silver badges19 bronze badges

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

Comments

Sergio · Accepted Answer · 2013-08-12 08:11:19Z

2

Try like this:

$("body").on('click',input:checkbox,function () {
    if ($(this).is(":checked")) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});

When you add new content you need to append it to the DOM.

But you can target a parent element that was not added after the DOM was loaded to be able to reference/attach-event to it using .on() and passing the selector as I wrote above on the first line of your code..

edited Aug 12, 2013 at 8:11

answered Aug 12, 2013 at 7:48

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

4 Comments

Nicklas Nygren Over a year ago

This will not work. on has to be called on a parent element to sustain the binding when new elements are added. jsfiddle.net/3hcFp/5

Sergio Over a year ago

Yes it does. In your example you assume '.ChekMarkWrap' is also inserted dynamic, I didn't. We don't know the OP's markup. I will change to $("body") anyway, then it's more safe.

Nicklas Nygren Over a year ago

True, true. It's reasonable to assume though, isn't it? :)

Sergio Over a year ago

Sant @NicklasNygren, helt rätt! och det var jag som tänkte fel på din kod först, sorry :) Ska vi radera detta?

RRikesh · Accepted Answer · 2013-08-12 07:50:44Z

0

You should use delegated events. Your code is running on document ready. Nothing is bound to new elements.

$("your-form-selector").on('click', ':checkbox', function(){
//your code here.
});

answered Aug 12, 2013 at 7:50

RRikesh

14.5k5 gold badges55 silver badges74 bronze badges

Comments

Ali Shah Ahmed · Accepted Answer · 2013-08-12 07:52:01Z

0

You can try using delegates. Something like this:

$(".ChekMarkWrap").delegate('click','input:checkbox',function () {
    //your functionality
});

For Reference: jQuery Documentation

answered Aug 12, 2013 at 7:52

Ali Shah Ahmed

3,3533 gold badges26 silver badges22 bronze badges

1 Comment

Nicklas Nygren Over a year ago

Delegate is deprecated as of jQuery 1.7.

Collectives™ on Stack Overflow

JQuery script for one checkbox selection from group not working while adding a checkbox dynamically

4 Answers 4

Comments

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related