单击备用无线电按钮时禁用备用列表框
单击备用无线电按钮时禁用备用列表框
提问于 2016-10-12 16:46:15
我的工作是两个单选按钮和一个列表框。当单击第一个单选按钮时，将禁用列表框，但当单击第二个无线电按钮时，列表框是可用的。我现在必须修改应用程序，使之有两个列表框和3个无线电按钮。如果单击了第一个单选按钮，我需要禁用两个列表框。如果第二个无线电按钮被点击，我只需要第一个列表框被禁用。如果选择了第三个单选按钮，我只需要禁用第二个列表框。我不知道如何在Javascript或JQuery中开始这样做！任何帮助都将不胜感激！！(如果相关的话，我在ColdFusion工作)。
这是我现在正在工作的代码。我得再加一个无线电按钮和另一个列表盒。
<script type="text/javascript">
function check_radio()
{
if(document.MedicaidResidents.choice[1].checked){
document.getElementById("T1").disabled=true;
}else {
document.getElementById("T1").disabled=false;
}
}
</script>
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1'>
<input type="radio" name="choice" value='1' onClick="check_radio()";>States<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()";>Houses
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>`回答 2
Stack Overflow用户
回答已采纳
发布于 2016-10-12 17:12:12
如果您的代码正常工作，您可以只复制和粘贴单选按钮和列表框吗？如果是这样的话，这是可行的。
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1'>
<input type="radio" name="choice" value='1' onClick="check_radio()";>States<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()";>Houses
<input type="radio" name="choice" value='3' onClick="check_radio()";>Foo
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
<select name="stateprompt2" multiple="multiple" size="10" id="T2">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
<script type="text/javascript">
function check_radio()
{
if(document.MedicaidResidents.choice[1].checked)
{
document.getElementById("T1").disabled=true;
document.getElementById("T2").disabled=true;
}
else if (document.MedicaidResidents.choice[2].checked)
{
document.getElementById("T1").disabled=true;
document.getElementById("T2").disabled=false;
}
else if (document.MedicaidResidents.choice[3].checked)
{
document.getElementById("T1").disabled=false;
document.getElementById("T2").disabled=true;
}
}
</script>Stack Overflow用户
发布于 2016-10-12 19:18:26
请找到下面的弹琴以及代码。http://jsfiddle.net/Manoj85/3jy0crdx/
对此有许多解决办法。
我的解决方案是使用JQuery禁用基于单选按钮选择。并在禁用列表框时用红色背景突出显示。
HTML代码：
<form name="myForm" action="Medicaid_Residents.cfm" method="post" id='f1'>
<div>
<input type="radio" name="choice" value="1" checked> States
<input type="radio" name="choice" value="2"> Houses
<input type="radio" name="choice" value="3"> Other
</div>
<div>
<p> List Box 1 </p>
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
</div>
<div>
<p> List Box 2 </p>
<select name="stateprompt2" multiple="multiple" size="10" id="T2">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
</div>
</form>JS:
$(document).ready(function() {
var all_radio_buttons = document.myForm.choice;
var prev = null;
var selected_radio_value = "1";
doRefresh(selected_radio_value);
for (var i = 0; i < all_radio_buttons.length; i++) {
all_radio_buttons[i].onclick = function() {
console.log(this.value);
selected_radio_value = this.value;
doRefresh(selected_radio_value);
};CSS代码：
form#f1 > div {
border: solid 1px red;
margin-bottom: 10px;
}
form#f1 > div > select {
width: 200px;
height: 100px;
}
form#f1 > div > select[disabled] {
background: red;
}希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40004043
复制相关文章
相似问题
腾讯云开发者
