Question

我工作的是2个单选按钮和一个列表框。单击第一个单选按钮时，列表框将被禁用，但单击第二个单选按钮时，列表框可用。我现在必须修改应用程序以拥有两个列表框和3个radiobuttons。如果单击第一个单选按钮，我需要禁用两个列表框。如果单击第二个radiobutton，我只需要禁用第一个列表框。如果选择了第三个单选按钮，我只需要禁用第二个列表框。我不知道如何在Javascript或JQuery中开始这样做！任何帮助将非常感谢!! （如果相关，我在ColdFusion工作。）

这是我现在正在使用的代码。我必须再添加一个radiobutton和另一个列表框。

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

Answer 1

如果您的代码有效，您可以复制并粘贴您已有的单选按钮和列表框吗？如果是这样的话就可以了。

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

Answer 2

请找到下面的jsfiddle以及代码。 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;
}

希望这有帮助。

单击备用radiobuttons时禁用备用列表框

2 个答案: