CODEWITHSUNDEEP
javascriptjquery
Tanasos
Tanasos

Reputation: 4098

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

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.');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="check-in__select js-check-in-times" id="time" name="AptTime" required="" aria-required="true" aria-label="times filter">
  <option value="2021-07-28T08:15:00.000-04:00" data-group="2021-07-28" style="display: none;">08:15 AM</option>
  <option value="2021-07-28T08:30:00.000-04:00" data-group="2021-07-28" style="display: none;">08:30 AM</option>
  <option value="2021-07-28T08:45:00.000-04:00" data-group="2021-07-28" style="">08:45 AM</option>
</select>

<div id="date" style="font-size: 24px; color: red; font-family: sans-serif;"></div>

Upvotes: 2

Views: 73

Answers (4)

Tanasos
Tanasos

Reputation: 4098

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.

Upvotes: 0

as-if-i-code
as-if-i-code

Reputation: 2360

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.');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="check-in__select js-check-in-times" id="time" name="AptTime" required="" aria-required="true" aria-label="times filter">
  <option value="2021-07-28T08:15:00.000-04:00" data-group="2021-07-28" style="display: none;">08:15 AM</option>
  <option value="2021-07-28T08:30:00.000-04:00" data-group="2021-07-28" style="display: none;">08:30 AM</option>
  <option value="2021-07-28T08:45:00.000-04:00" data-group="2021-07-28" style="">08:45 AM</option>
</select>

<div id="date" style="font-size: 24px; color: red; font-family: sans-serif;"></div>

Upvotes: 1

JS_INF
JS_INF

Reputation: 467

  • 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.');
    }
}

Upvotes: 1

Swati
Swati

Reputation: 28522

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.');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<select class="check-in__select js-check-in-times" id="time" name="AptTime" required="" aria-required="true" aria-label="times filter">
  <option value="2021-07-28T08:15:00.000-04:00" data-group="2021-07-28" style="display: none;">08:15 AM</option>
  <option value="2021-07-28T08:30:00.000-04:00" data-group="2021-07-28" style="display: none;">08:30 AM</option>
  <option value="2021-07-28T08:45:00.000-04:00" data-group="2021-07-28" style="">08:45 AM</option>
</select>

<div id="date" style="font-size: 24px; color: red; font-family: sans-serif;"></div>

Upvotes: 1

Related Questions