禁用特定單選按鈕檢查上的select元素

我試圖在「color1，color2和color3」按鈕被選中時禁用「選擇」。我想在啓用「color4」單選按鈕時啓用它。我去了不同的資源，並弄糊塗如何把它放在我的代碼。禁用特定單選按鈕檢查上的select元素

這裏是我的HTML：

<br> <input type="radio" id="color1" name="color" value="orange" onchange="display()" /> 
    <br> <input type="radio" id="color2" name="color" value="white" onchange="display()" /> 
    <br> <input type="radio" id="color3" name="color" value="red" onchange="display()" /> 

    // when checked, the select must be enable 
    <br> <input type="radio" id="color4" name="color" value="other" onchange="display()" /> 
    <select id="other_color" onchange="display()" /> 
      <option value="black">black</option> 
      <option value="pink">pink</option> 
      <option value="green">Green</option> </select> 
    <div id="color_display" height="100px" width="100px"></div>

現在對於我的JS：

我還沒有包括「color4」，因爲它不會顯示任何東西，我希望它來觸發啓用選擇。我應該改變還是創建另一個JS來檢查？我不知道從哪裏開始。

來源

2016-11-27 Poofbrayy

「我想使它權當單選按鈕被選中。」 - 你用右邊的單選按鈕是什麼意思？一世。你想在下拉菜單中顯示相同的顏色嗎？ II。如果選擇「其他」單選按鈕，您是否要禁用該下拉菜單？ – Anadi

oohh geez對不起，這裏想要說的是這樣的，當選擇「color1，color2和color3」按鈕時禁用「選擇」。我想在啓用「color4」單選按鈕時啓用它。 – Poofbrayy

從我的理解。您可以在您的JS代碼中進行以下更改。

document.getElementById("other_color").disabled = true;//disabling the select tag initially; 

function display() { 
    if (document.getElementById('color1').checked) { 
    document.getElementById('color_display').innerHTML = " Orange"; 
    } 
    if (document.getElementById('color2').checked) { 
    document.getElementById('color_display').innerHTML = " White"; 
    } 
    if (document.getElementById('color3').checked) { 
    document.getElementById('color_display').innerHTML = " Red"; 
    } 

    if (document.getElementById('color4').checked) { 
    document.getElementById('other_color').disabled = false;//enable the select tag when the radio 4th radio gets checked 

    if (document.getElementById('other_color').value == 'black') { 
     document.getElementById('color_display').innerHTML = " Black"; 
    } 

    if (document.getElementById('other_color').value == 'pink') { 
     document.getElementById('color_display').innerHTML = " Pink"; 
    } 

    if (document.getElementById('other_color').value == 'green') { 
     document.getElementById('color_display').innerHTML = " Green"; 
    } 
    } 
}

來源

2016-11-27 14:03:36 fullmetal

謝謝你的工作！ – Poofbrayy

請改變你的js那樣。

function display() { 
     if (document.getElementById('color4').checked) { 
      document.getElementById("other_color").disabled = true; 
     } 
     else{ 
      document.getElementById("other_color").disabled = false; 
     } 
    }

來源

2016-11-27 14:27:33 Anadi

如果您想在下拉菜單中顯示所選顏色，請告訴我。 – Anadi

根據您的文章，我從您的評論推斷您最初的職位和答案的信息，我的事情你想達到什麼樣的我在下面的尖晶石，已經複製：

而不是顯示默認情況下爲選擇選項，將其隱藏以便僅在選擇單選按鈕時才顯示該選項，以便使用戶更加友好，從而改善用戶體驗。

var color = document.querySelectorAll('input[name="color"]'), 
 
    displaySelectedColour = document.getElementById("color_display"), 
 
    selectOption = document.getElementById("other_color"); 
 
    
 
for (var i in color) { 
 
    color[i].onclick = function() { 
 
     if (document.getElementById('color1').checked == true) { 
 
      displaySelectedColour.style.display = "block"; 
 
      displaySelectedColour.innerText = "Orange"; 
 
      selectOption.style.display = "none"; 
 
     } 
 
     if (document.getElementById('color2').checked == true) { 
 
      displaySelectedColour.style.display = "block"; 
 
      displaySelectedColour.innerText = "White"; 
 
      selectOption.style.display = "none"; 
 
     } 
 
     if (document.getElementById('color3').checked == true) { 
 
      displaySelectedColour.style.display = "block"; 
 
      displaySelectedColour.innerText = "Red"; 
 
      selectOption.style.display = "none"; 
 
     } 
 
     if (document.getElementById('color4').checked == true) { 
 
      displaySelectedColour.style.display = "none"; 
 
      selectOption.style.display = "block"; 
 
     } 
 
    }; 
 
}

<input type="radio" id="color1" name="color" value="orange"> 
 
<br><input type="radio" id="color2" name="color" value="white"> 
 
<br><input type="radio" id="color3" name="color" value="red"> 
 
<br><input type="radio" id="color4" name="color" value="other"> 
 

 
<!-- Select disabled by default and enabled only on color4 radio button check --> 
 
    <br> 
 
    <select id="other_color" style="display: none;"> 
 
    <option disabled selected value>-- Select one --</option> 
 
      <option>black</option> 
 
      <option>pink</option> 
 
      <option>green</option> 
 
    </select> 
 
    <div id="color_display" height="100px" width="100px"></div>

來源

2016-11-27 14:53:11 nyedidikeke

禁用特定單選按鈕檢查上的select元素

回答

相關問題