Disable onclick when event is from another onclick

Question

I have 2 checkboxes. They shall be synced, so i did some jQuery

<input type="checkbox" id="check1" onclick="jQuery('#check2').trigger('click')">
<input type="checkbox" id="check2" onclick="jQuery('#check1').trigger('click')">

When I press check1, check2 will be checked/unchecked, but also triggers the onclick of check2, so check1 will be checked -> unchecked. How can I solv this?

http://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group — aredzko, Nov 10 '15 at 17:03
Is this just for testing? It seems very odd behaviour to require, possibly even an XY problem. — Rory McCrossan, Nov 10 '15 at 17:07
Is it getting in to an infinite loop?! As in the check boxes keep getting checked and unchecked for forever? — Arun Reddy, Nov 10 '15 at 17:09

Chris · Answer 1 · 2015-11-10T17:16:53.583

1

In general, you should use a radio button for this, as it has the desired functionality built in. To answer your question however, you need to set/remove the checked state of the box, instead of triggering the click.

<input type="checkbox" id="check1" onclick="jQuery('#check2').attr('checked', false)">
<input type="checkbox" id="check2" onclick="jQuery('#check1').attr('checked', false)">

If you want to sync them, then you could move the JS so that it is not inline and use something like:

jQuery(function() {
    var boxes = $('input[type=checkbox]');

    boxes.on('click', function(evt) {
        var other = boxes.not( $(this) );

        if( other.is(':checked') )
            other.removeAttr('checked');
        else
            other.attr('checked', true);
    });
});

edited Nov 10 '15 at 17:16

answered Nov 10 '15 at 17:09

Chris

4,762
3
44
79

3

On jq 1.6+ you should use prop() – A. Wolff Nov 10 '15 at 17:10
You could always simple use `.removeAttr('checked');` – Chris Nov 10 '15 at 17:11
But this doesn't toggle it. If it was *un*-checked, then this wouldn't set the other to true. – Jonathan Lam Nov 10 '15 at 17:12
and @A.Wolff what's the difference between `prop()` and `attr()`? – Jonathan Lam Nov 10 '15 at 17:12
"They shall be **synced**" As there is no different default state set, both checkboxes shall always have the same state - at least my interpretation of the scripts used in the question – Andreas Nov 10 '15 at 17:15
[`.prop()` vs. `.attr()`](http://stackoverflow.com/questions/5874652/prop-vs-attr) – Andreas Nov 10 '15 at 17:16

guest271314 · Accepted Answer · 2015-11-10T17:57:43.003

1

Try placing elements inside parent container , using change event attached to parentElement :checkbox ; within change handler set siblings elements checked property to current element checked property

$("div :checkbox").on("sync", function(e) {
  console.log(e.target.id)
})

$("div :checkbox").on("change", function() {
  $(this).siblings().prop("checked", this.checked)
  .trigger("sync")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
  <input type="checkbox" id="check1" />
  <input type="checkbox" id="check2" />
</div>

edited Nov 10 '15 at 17:57

answered Nov 10 '15 at 17:51

guest271314

1
15
104
177

Thx dude - that's what I am looking for. – Kevin Kendzia Nov 11 '15 at 09:24

score 0 · Answer 3 · answered Nov 10 '15 at 17:18

The onclick event you're using in your html elements is unnecessary and confusing. Instead, I would suggest you add a class to both elements, and then you can uncheck all elements other than the one that was just clicked on.

HTML

<input type="checkbox" id="check1" class="myClass" >Box 1
<input type="checkbox" id="check2" class="myClass">Box 2

JQuery / Javascript

var $checkboxes = $('.myClass');
$checkboxes.click(function() {
   $checkboxes.not(this).prop('checked', false);
});

JS Fiddle demo

Disable onclick when event is from another onclick

3 Answers3