当所有options-tags与数组值（jQuery）匹配时，将它们设置为“disabled”

Question

I struggle a bit with a problem where I have to use two for loops (that's my approach at least), to compare data with an array. I'll try to keep it short:

I have an array var excludeTimes = ["00:00", "00:45", "02:30", "14:15"] etc.

and an <select> element with some <option> elements

<select id="Times">
        <option value="--:--">--:--</option>
        <option value="00:00">00:00</option>
        <option value="00:15">00:15</option>
        <option value="00:30">00:30</option>
        <option value="00:45">00:45</option>
etc.
</select>

Now, I want to compare the values in my excludeTimes array with the values of my <option> tags in <select> .

If they match, add the attribute "disabled" to the matched

function notSelectableTimes() {
  const excludeTimes = ["00:00", "00:45", "02:30", "14:15"] 
  const e = $("#Times>option").map(function() { return $(this).val() }).get();
  const ee = e.slice(1);

    for(i = 0; i < excludeTimes.length; i++) {

      const find = $.inArray( excludeTimes[i], ee);

      for(j = 0; j < ee.length; j++) {

        if( ee[j] === excludeTimes[i]) {
          console.log(`No bookings at ${ee[j]}!`);
          console.log(ee[j]);
          console.log(find);
        }
      }
    }
}

notSelectableTimes();

Answer 1

The route you're taking is a bit convoluted in my opinion. You loop through the options to map them to their values, then compare them to the array, and then hypothetically would need to re-lookup the options by value to then disable them .

The last step is the portion you're missing, but rather than complete that route, I'd prefer to propose an alternative. You're already looping through the options to .map() them - why not just compare the values in that loop instead?

The following loops through each <option> in #Times and sets its disabled attribute based on the presence of the option's value in the excludeTimes array.

 const excludeTimes = ["00:00", "00:45", "02:30", "14:15"]; $("#Times > option").attr("disabled", function() { //For each <option> in #Times return excludeTimes.includes($(this).val()); //Disable if value in excludeTimes }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="Times"> <option value="--:--">--:--</option> <option value="00:00">00:00</option> <option value="00:15">00:15</option> <option value="00:30">00:30</option> <option value="00:45">00:45</option> </select> 

Answer 2

In your code you need to add a line as below
$('#Times option[value="'+ee[j]+'"]').attr('disabled','disabled');

    <script>
        $(document).ready(function(){
            notSelectableTimes();
        });
        function notSelectableTimes() {
            const excludeTimes = ["00:00", "00:45", "02:30", "14:15"] 
            const e = $("#Times>option").map(function() { return $(this).val() }).get();
            const ee = e.slice(1);

            for(i = 0; i < excludeTimes.length; i++) {
                const find = $.inArray( excludeTimes[i], ee);
                for(j = 0; j < ee.length; j++) {
                    if( ee[j] === excludeTimes[i]) {
                        $('#Times option[value="'+ee[j]+'"]').attr('disabled','disabled');
                        console.log(`No bookings at ${ee[j]}!`);
                        console.log(ee[j]);
                        console.log(find);
                    }
                }
            }
        }
    </script>