如何在多选中禁用移动浏览器中选择 onchange 事件的选项

Question

我需要一个多选标签并在 onchange 事件触发时禁用一些选择，因为可能的选择数量有限。

基本代码如下：

<script type="text/javascript">
    function selectionChange(selection) {
        selection.options[0].disabled = true;
    }
</script>
<select multiple="multiple" onchange="selectionChange(this)">
    <option>Option #1</option>
    <option>Option #2</option>
    <option>Option #3</option>
    <option>Option #4</option>
    <option>Option #5</option>
</select>

正如您所见，没有什么特别之处，而且在桌面浏览器中运行起来就像是一种魅力。问题出在移动浏览器上。

例如，在 Android 中，onchange 不会触发，直到您按 OK。

现在奇怪的是，在 iOS Safari 中，当我使用 alret() 时会触发警报，但选择项将保持启用状态，直到我按下“完成”并再次打开选择。但是在 Android 中，只有在您按下 OK 后才会触发警报。

我花了几天时间在这里寻找解决方案，我开始认为这在移动浏览器中无法完成，但我也没有找到任何关于此的参考。

Answer 1

也许你可以尝试类似的方法：

<script type="text/javascript">
    function selectionClicked(selection) {
        // Check if any option was selected
        if(selection.value) {
            selection.options[0].disabled = true;
        }
    }
</script>
<select multiple="multiple" onclick="selectionClicked(this)">
    <option>Option #1</option>
    <option>Option #2</option>
    <option>Option #3</option>
    <option>Option #4</option>
    <option>Option #5</option>
</select>

或

<script type="text/javascript">
    function selectionClicked(selection) {
        // Check if any option was selected
        for(var i=0; i<selection.options.length; i++) {
            if(selection.options[i].selected) {
                selection.options[0].disabled = true;
                break;
            }
        }
    }
</script>