如果在表单中选择了一个选项，如何禁用多个选项答案

【问题标题】：how to disable multiple options if one option is selected in the forms如果在表单中选择了一个选项，如何禁用多个选项
【发布时间】：2022-01-22 20:35:58
【问题描述】：

您好，如果您只选择一个选项，有什么方法可以禁用选择表单中的多个选项？

例如：

首先选择表格

<select name="secondchoice" id="second">
<option value="None">None</option>
<option value="Content Dev">Content Dev</option>
<option value="Web">Web</option>
<option value="Science">Science</option>
<option value="Managing">Managing</option>
</select>

二次选择表格

<select name="day2" id="exam2">
<option value="None">None</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
</select>

如果我在第一个表单中选择“无”，那么第二个表单必须禁用“周一至周四”选项，第二个表单中唯一可用的选项也必须是“无”。谢谢！

【问题讨论】：

使用 JavaScript/jQuery 发布 minimal reproducible example

标签： javascript html jquery forms

【解决方案1】：

您可以通过在第一个选择元素更改时通过检查其值并相应地隐藏元素来使用javascript隐藏第二个元素中的选项，如下所示：

// Select Elements
const first = document.getElementById('first')
const second = document.getElementById('second')

// Option Elements
const one = document.getElementById('one')
const two = document.getElementById('two')

// Runs whenever first select has changed
first.onchange = () => {
  // Checks First Selects Value
  if (first.value === '1') {
    // If '1' then hide TWO and show ONE
    second.value = 'ONE'
    one.hidden = false
    two.hidden = true
  } else if (first.value === '2') {
    // Else, if '2' then hide ONE and show TWO
    second.value = 'TWO'
    one.hidden = true
    two.hidden = false
  }
}

<select id='first'>
  <option>1</option>
  <option>2</option>
</select>

<select id='second'>
  <option id='one'>ONE</option>
  <option id='two'>TWO</option>
</select>

这是一个非常基本的例子，可以改进很多。

【讨论】：

【解决方案2】：

您可以执行以下操作，因此当您选择无时，其他选项将被禁用，而除了无之外，它将再次启用

function disabledEnabled(event) {
  var optiosLists = document.getElementById("exam2").options;
    
        
        for (let i = 0; i < optiosLists.length; i++) {
             if(event.target.value === "None"){                 
                 optiosLists[i].disabled = true;        
                  optiosLists[0].disabled = false;
                } else {
                    optiosLists[i].disabled = false;    
                }
            
            
    }
    
}

【讨论】：

一个好的答案将始终包括解释为什么这会解决问题，以便 OP 和任何未来的读者可以从中学习。
是的，谢谢告知，下次会更新和关心

【解决方案3】：

您可以disabled 选择元素本身及其每个选项。您可以找到 2 种方法来实现以下各项。

【讨论】：