1

I have a simple object of input checkbox elements and want to check in an each loop which ones are checked and the do stuff. The checkboxes are in one tr in several td's in a table.

Here is my code:

$('table.occupancy-table').on('change', '.minimum_stay input', function() {
    var minimumStayInputs = $(this).closest('tr').find('input');
    $(minimumStayInputs).each(function(){
        if(this.prop('checked')) {
        //do stuff
        }
    }
}

If I console.log this in the each loop, I get data like:

<input id="R11520" type="checkbox" name="minimum_stay[152][1442786400]" value="checked"> <input id="R11521" type="checkbox" name="minimum_stay[152][1442872800]" value="checked">...

But I always get an error Uncaught TypeError: this.prop is not a function from this.prop('checked'). I also tried .is(":checked") with the same result.

Any ideas what the reason might be?

Let me know if you need sample html or I should create fiddle.

Sebsemillia
  • 9,366
  • 2
  • 55
  • 70

1 Answers1

5

this inside the loop is the native DOM element, unwrapped from jQuery.

It has to be wrapped again

$('table.occupancy-table').on('change', '.minimum_stay input', function() {
    var minimumStayInputs = $(this).closest('tr').find('input');
    $(minimumStayInputs).each(function(){
        if ( $(this).prop('checked') ) {
        }
    });
});

You could also just use the native this.checked, or if you're trying to count them

$(this).closest('tr').find('input:checked').length
adeneo
  • 312,895
  • 29
  • 395
  • 388