Check prop of one of the elements of the array jquery

Question

I have two main elements of the navigation opened when the input field is checked. I'm trying to trigger close navigation function on keyup esc only when one of the two man navigation elements is open:

$(document).on('keyup', this.onPressEsc.bind(this));

onPressEsc(e) {
    if (e.keyCode === 27 && this.$body.find(selectors.input).prop('checked') === true) {
        this.closeMainNav();
        this.removeOverlay();
    }
}

With the current implementation only the first element of the array is checked, is there any way to verify both of them?

Answer 1

The .prop() method gets the property value for only the first element in the matched set.

So, you're using prop() incorrectly. That's only going to return true for the first element if both are checked.

To select all the elements that match selectors.input that are checked (assuming that's a string with a selector defined), add ":checked", and test the length:

onPressEsc(e) {
    if (e.keyCode === 27 && this.$body.find(selectors.input + ":checked").length == 2) {
        this.closeMainNav();
        this.removeOverlay();
    }
}