Как отключить значение, когда оно выбрано пользователем один раз?

#javascript

Вопрос:

Я хочу отключить параметр значения, как только пользователь его выберет.

Например, если пользователь выберет (7:00 утра), то в следующий раз, когда он снова нажмет на раскрывающийся список, значение не будет доступно для их выбора. Каков наилучший способ сделать это?

 <td> Time it will display (Please enter time format hh:mm tt):         
    <td>
        <select ID="time_used" NAME="time_used"  VALIDATE="date" >
            <option selected> Select Time</option>
            <option value="7:00 AM">7:00 AM</option>   
            <option value="7:15 AM">7:15 AM</option> 
            <option value="7:30 AM">7:30 AM</option>   
            <option value="7:45 AM">7:45 AM</option>
            <option value="8:00 AM">8:00 AM</option>
            <option value="8:15 AM">8:15 AM</option> 
            <option value="8:30 AM">8:30 AM</option>   
            <option value="8:45 AM">8:45 AM</option>
            <option value="9:00 AM">9:00 AM</option> 
            <option value="9:15 AM">9:15 AM</option> 
            <option value="9:30 AM">9:30 AM</option>   
            <option value="9:45 AM">9:45 AM</option>                    
            <option value="10:00 AM">10:00 AM</option>
        </select>
    </td>
</td>

Ответ №1:

ответ @ncksllvn работает, но я бы предложил другое решение.

По нашему опыту работы, отключенные элементы управления имеют два основных недостатка.

Они не отправляются как часть отправки.
Пользователей смущает что-то с границей, но оно не выбирается.

Вторая проблема также возникает, если вы пытаетесь создать элемент управления только для чтения.

 <td> Time it will display (Please enter time format hh:mm tt):         
    <td>
        <select ID="time_used" NAME="time_used"  VALIDATE="date" >
            <option selected> Select Time</option>
            <option value="7:00 AM">7:00 AM</option>   
            <option value="7:15 AM">7:15 AM</option> 
        </select>
        <span id="time_used_display" style="display:none"></span>
    </td>
</td>



function disabledTimeSelect() {
    var timeSelect = document.getElementById('time_used')
    var value = timeSelect.options[timeSelect.selectedIndex].value;

    if (value === "") {
      return;
    }

    timeSelect.style.display = "none";
    var span = document.getElementById("time_used_display");

    span.innerHTML = value;
    span.style.display = "inline";
}


window.onload = function() {
  disabledTimeSelect();
};

Редактировать

Из документов MDN:

Этот логический атрибут указывает, что элемент управления формой недоступен для взаимодействия. В частности, событие щелчка не будет отправлено для отключенных элементов управления. Кроме того, значение отключенного элемента управления не передается вместе с формой.

1. Полезно знать о том, что отключенные входные данные не отправляются при отправке!

2. спасибо, но не совсем то, что я искал, это работает, я пробую, но мне бы хотелось, чтобы это было, когда пользователь отправит форму в следующий раз, когда они отправят форму, которая в это время не будет доступна

3. Смотрите обновленный ответ. Кстати, это та деталь, которую вам действительно нужно включить в свой вопрос для начала.

Ответ №2:

Довольно просто:

 // get a reference to the menu
var timeSelect = document.getElementById('time_used')

// set an onchange handler
timeSelect.onchange = function(){
    timeSelect.setAttribute('disabled', 'disabled') // set the disabled attribute
}