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

Question

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

例如：

第一个Select表格

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

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

如果我 select 在第一种形式中使用“None”，那么第二种形式必须禁用选项“周一至周四”，唯一可用的选项也必须是“None”以第二种形式。谢谢！

Answer 1

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

Answer 2

您可以使用 javascript 做到这一点，方法是在第一个 select 元素更改时隐藏第二个元素中的选项，方法是检查其值并相应地隐藏元素，如下所示：

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

这是一个非常基本的示例，可以进行大量改进。

Answer 3

你可以像下面那样做，所以当你选择 none 时，其他选项将被禁用，而不是 none 它会再次启用

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

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

how to disable multiple options if one option is selected in the forms

html

javascript

forms

jquery