Event on checkboxes not happening

Question

I have a series of checkboxes and I am running the following but it never happens and the console gives no result

jQuery( ".masonry input[checkbox]" ).on("change", function() {
  if(jQuery(this).is(":checked")) {
    console.log("changed");
    jQuery('#terzo').removeAttr("disabled");
  }
});

HTML

<div class="masonry">
    <div class="item">
        <input type="checkbox" name="thing_1" value="valuable" id="thing_1">
            <label for="thing_1">
                <img class="img-responsive" src="http://independentskies.com/wp-content/uploads/2013/11/428126-3732x2655.jpg">
            </label>
        </div>
        <div class="item">
                <input type="checkbox" name="thing_2" value="valuable" id="thing_2">
            <label for="thing_2">
        <img class="img-responsive" src="http://viajescasaquinta.com/wp-content/uploads/2016/11/Grecia.jpg">
    </label>
</div>

@Barmar there you go, quetsion updated with html if ever was needed — Roberto Marras, Apr 16 '17 at 22:04

score 2 · Accepted Answer · answered Apr 16 '17 at 22:03

2

"input[checkbox]" is not a valid css selector to select <input type="checkbox"> element. Use "input[type=checkbox]"

answered Apr 16 '17 at 22:03

guest271314

1
15
104
177

1

Or the jQuery abbreviation `:checkbox` – Barmar Apr 16 '17 at 22:03
Note also, double quotes surrounding attribute value are required at `css` `input[type="checkbox"]` – guest271314 Apr 16 '17 at 22:04
I don't think they are, unless the type contains space or other special characters. – Barmar Apr 16 '17 at 22:06
just tried `jQuery( '.masonry input[type="checkbox"]' ).on("change", function() { if(jQuery(this).is(":checked")) { console.log("changed"); jQuery('#terzo').removeAttr("disabled"); } });` and i got no console neither – Roberto Marras Apr 16 '17 at 22:07
I just typed `$("input[type=text]")` in the console and it worked. – Barmar Apr 16 '17 at 22:07
@Barmar At `css`, that is, `stylesheet` or `.textContent` of ` – guest271314 Apr 16 '17 at 22:08
@Barmar since I am on jquery could you elaborate you comment base don my code while using `:checkbox` – Roberto Marras Apr 16 '17 at 22:08
By the way, when you deal with properties and not attributes, I would recommend you to use `prop`: [http://api.jquery.com/prop/](http://api.jquery.com/prop/) – Badacadabra Apr 16 '17 at 22:09
@RobertoMarras Are the elements appended to `document` dynamically? – guest271314 Apr 16 '17 at 22:09
@guest271314 yes they are actually, via ajax – Roberto Marras Apr 16 '17 at 22:09
@guest271314 hmm ok i think i know what you mean, I will append this js too with the ajax and see how it goes – Roberto Marras Apr 16 '17 at 22:10
@RobertoMarras You can attach the event to the element when created using `jQuery(html, attributes)` [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements/43224244?s=2|0.0000#43224244) or use event delegation `$(document).on("change", '.masonry input[type="checkbox"]', function(){//do stuff})` – guest271314 Apr 16 '17 at 22:10
@guest271314 that's it, since I was using ajax and I actually had a click in there, i simply added `jQuery('#terzo').removeAttr("disabled");` and it worked. Will accept your answer for future users as it is correct tho – Roberto Marras Apr 16 '17 at 22:14
@RobertoMarras _"that's it"_ Do you mean `"input[checkbox]"` selector referenced `` element? – guest271314 Apr 16 '17 at 22:15
@guest271314 with _that's it_ i refer to your comment _Are the elements appended to document dynamically_ which made me realise I was actually calling these via ajax, so the code wouldn't work regardless. Regardless of the fact i was wrongly using the selector as you have correctly pointed out `"input[type=checkbox]"` instead of `"input[checkbox]"` so your answer is correct – Roberto Marras Apr 16 '17 at 22:18
1

@Barmar You are correct. The quotes are required at `css` surrounding attribute value that is a number, see versions 1 and 2 at http://plnkr.co/edit/QdeU1OeYIpyHmIis1fPX?p=preview, not at `[attrName=attrValueWithoutSpacesOrSpecialCharacters]` versions 3, 4. – guest271314 Apr 16 '17 at 22:21

Event on checkboxes not happening

1 Answers1