사용자가 선택한 값을 사용하지 않도록 설정하는 방법은 무엇입니까?

Question

사용자가 일단 값 옵션을 사용하지 않도록 설정하려고합니다.

예를 들어 사용자가 오전 7시를 선택한 다음 다음 번에 으로 이동하고 드롭 다운을 다시 클릭하면 값을 선택할 수 없습니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

<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> 

Answer 1

,하지만 난 다른 해결책을 제안한다.

장애가있는 컨트롤에는 두 가지 주요 단점이 있습니다.

1. SUBMIT의 일부로 전송되지 않습니다.
2. 사용자는 테두리가있는 항목으로 혼동되지만 선택할 수는 없습니다.

두 번째 문제는 읽기 전용 제어도 수행하려는 경우에도 적용됩니다.

<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 Docs에서

편집 :

이 부울 속성은 폼 컨트롤은 상호 작용을 사용할 수 없음을 나타냅니다. 특히 click 이벤트는 비활성화 된 컨트롤에 전달되지 않습니다. 또한 비활성화 된 컨트롤의 값은 양식과 함께 제출되지 않습니다.

Answer 2

매우 간단 : ncksllvn의 응답 작품 @

// 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 
}