禁用特定单选按钮检查上的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元素

回答

相关问题