單擊備用單選按鈕時禁用備用列表框

Question

我工作的是2個單選按鈕和一個列表框。單擊第一個單選按鈕時，列表框被禁用，但當單擊第二個單選按鈕時，列表框可​​用。我現在必須修改應用程序以擁有兩個列表框和三個單選按鈕。如果第一個單選按鈕被點擊，我需要禁用兩個列表框。如果第二個單選按鈕被點擊，我只需要第一個列表框被禁用。如果第三個單選按鈕被選中，我只需要第二個列表框被禁用。我不知道如何開始在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>` 

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

希望這有助於。