提问人：GoldaKen 提问时间：11/9/2023 最后编辑：j08691GoldaKen 更新时间：11/10/2023 访问量：47
禁用某些输入的选择
disable select for certain input
问：
我想在选中我的 type = radio input 时禁用 select 属性。 这是我正在谈论的代码部分：
<input id="societeInterne" name="radioSociete" type="radio" value="Interne"/><label>Interne / </label>
<input id="societeExterne" name="radioSociete" type="radio" value="Externe"/><label>Externe - </label>
<label for="PrestataireStit"> Préciser le STIT </label>
<ol>
<li style="list-style-type: disc">
<select id="selectPresta">
<option value='GROUPE presta' name='Societe presta'>presta</option>
<option value='GROUPE presta' name='Societe presta'>presta</option>
<option value='GROUPE presta' name='Societe presta'>presta</option>
</select>
</li>
</ol>
我想要的是，当未选择输入“societeExterne”时，将禁用“selectPresta”选择。我尝试在 javascript 中使用不同类型的函数，但没有一个有效：
var radioExterne = document.getElementById('societeExterne');
var radioInterne = document.getElementById('societeInterne');
var selectPresta = document.getElementById('selectPresta');
if (radioExterne.checked) {
selectPresta.disabled = false;
} else {
selectPresta.disabled = true;
}
var radioExterne = document.getElementById('societeExterne');
var radioInterne = document.getElementById('societeInterne');
var selectPresta = document.getElementById('selectPresta');
radioExterne.addEventListener(
"change",
(event) => {
selectPresta.disabled = !event.target.checked;
},
false,
);
答：
0赞
Moob
11/9/2023
#1
如果你将内容包装在一个元素中，你可以这样做，然后你可以监听表单的变化并相应地切换：formselectPresta.disabled
var form = document.getElementById('myform');
var radioExterne = document.getElementById('societeExterne');
var selectPresta = document.getElementById('selectPresta');
//listen for a change in the form
form.addEventListener("change", (event) => {
//does the value of form.radioSociete not match that of radioExterne?
selectPresta.disabled = !(form.radioSociete.value == radioExterne.value);
});
//trigger change on load to set initial state
form.dispatchEvent(new Event("change"));<form id="myform">
<label><input id="societeInterne" name="radioSociete" type="radio" value="Interne" />Interne / </label>
<label><input id="societeExterne" name="radioSociete" type="radio" value="Externe" />Externe - </label>
<label for="PrestataireStit"> Préciser le STIT </label>
<ol>
<li style="list-style-type: disc">
<select id="selectPresta">
<option value='GROUPE presta' name='Societe presta'>presta</option>
<option value='GROUPE presta' name='Societe presta'>presta</option>
<option value='GROUPE presta' name='Societe presta'>presta</option>
</select>
</li>
</ol>
</form>评论
0赞
GoldaKen
11/9/2023
嘿，伙计，非常感谢，即使它没有完全按照我想要的方式做，它也帮助我找到了解决方案，所以非常感谢你，你是我的救星！
0赞
Moob
11/10/2023
@GoldaKen 不客气。我误读了你的要求。我已经更正了我的示例，除非选择了 societeExterne，否则禁用 selectPresta。如果符合您的要求，请点赞和/或接受我的回答。
-1赞
User
11/10/2023
#2
将此添加到脚本标记中
//set element to be disabled by default
const selectElement = document.getElementById('selectPresta');
function enableSelectElement() {
var selectedRadio = document.querySelector('input[type="radio"]:checked').id;
//set element to be enabled/disabled by calling function
selectElement.disabled = selectedRadio !== 'societeExterne';
};
评论
event.target.checkedselectPresta.disabled