Question

我希望在用户选择后禁用值选项。

例如，如果用户选择（上午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>

Answer 1

非常简单：

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

Answer 2

@ncksllvn的答案有效，但我会提出一个不同的解决方案。

根据我们的工作经验，禁用控件有两个主要缺点。

它们不是作为SUBMIT的一部分发送的。
用户对带边框的内容感到困惑，但无法选择。

如果您尝试制作只读控件，第二个问题也适用。

<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事件。 此外，表单未提交已禁用的控件值。

如何在用户选择一次时禁用值？

2 个答案: