CODEWITHSUNDEEP
javascriptjquery
bobc82
bobc82

Reputation: 537

Enable click event when another checkbox is cheched

I need a jQuery function that does the following thing: for example, when checkbox1 is checked, when I click on some other elements (with an id starting with element-) I could print the id of these elements in the console as follows:

$('#checkbox1').click(function() {
    if ($(this).is(':checked')) {
        $(document).on('click','[id^=element-]', function(e) {
            console.log(this.id);
        });
    } else {}
});

I tested this example and it's not working. I have not idea when I'm wrong.

Upvotes: 3

Views: 72

Answers (2)

Richard Hamilton
Richard Hamilton

Reputation: 26444

I tested it out, and this will work for you

$("input[id^=d]").on("click", function() {
    var id = $(this).prop("id");
    if ($("#c1").is(":checked")) {
        console.log(id);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Dogs <input id="c1" type="checkbox" />
Cats <input id="d1" type="checkbox" />
Zebras <input id="d2" type="checkbox" />
Rhinos <input id="e1" type="checkbox" />

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337733

The simplest way to do this would be to invert your logic. That is to say, place the click handler on the required elements and within that check the state of the checkbox. Try this:

$(document).on('click', '[id^="element-"]', function(e) {
  if ($('#checkbox1').is(':checked'))
    console.log(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>
  <input type="checkbox" id="checkbox1" />
  Check me!
</label>

<div>
  <button id="element-foo">Foo</button>
  <button id="element-bar">Bar</button>
</div>

Upvotes: 4

Related Questions