Do something IF at least one item does not have a specific style applied

Question

Here is a fiddle for referrence https://jsfiddle.net/mc6jqtzr/

I need to be able to populate the innerHTML of #date with some content only IF at least one option in the select list above DOES NOT have a style applied (in this case the display property).

e.g. the last option does not have a style applied, so the #date should get populated.

var date = $("#date");


// Show the date only if there are open spots
if ($('.js-check-in-times option:visible').length === 0) {
  date.html('');  
} else {
  date.html('Working now.');
}

user_10606400 · Answer

You can loop through options to get count of option which are hidden then check if the total hidden and total option are same or not depending on this show your message.

Demo Code :

var date = $("#date");
var count = 0;
$('.js-check-in-times option').each(function() {
  if ($(this).css("display") == "none") {
    count++;
  }
})
console.log(count)
// Show the date only if there are open spots
if ($('.js-check-in-times option').length === count) {
  date.html('');
} else {
  date.html('Working now.');
}

user_16247756 · Answer

you can select all the options then get style attribute and check

Check if style is empty

var date = $("#date");
var sel = $("#time");
var opts = sel.find("option");

for(var opt of opts) {
    if($(opt).attr("style") !== undefined && $(opt).attr("style") === "") {
        date.html("There's Element Haven't Style");
    } else {
        date.html('Working now.');
    }
}

Check if just the visible options and it's style

var date = $("#date");
var sel = $("#time");
var opts = sel.find("option");

for(var opt of opts) {
    if($(opt).css("display") !== "none" && $(opt).attr("style") !== undefined && $(opt).attr("style") === "") {
        date.html("There's Element Haven't Style");
    } else {
        date.html('Working now.');
    }
}

user_12871205 · Answer

Filter options based on the value of style attribute.
If style attribute is absent, compare with null instead of ''

var date = $("#date");

// Show the date only if there are open spots
var optionsWithEmptyStyle = $('.js-check-in-times option').filter(function() {
  return $(this).attr('style') === '';
});

if (optionsWithEmptyStyle.length === 0) {
  date.html('');
} else {
  date.html('Working now.');
}

user_3466235 · Answer

A simple, yet working solution:

if ($('.js-check-in-times option[style=""]').length > 0)

This seems to do the trick.

Much thanks to andy mccullough for pointing out the visibility limitations for select options.

Do something IF at least one item does not have a specific style applied

4 Answers