javascript - 在特定单选按钮检查中禁用选择元素

Question

我试图在选择“颜色 1、颜色 2 和颜色 3”按钮时禁用“选择”。我想在选中“color4”单选按钮时启用它。我访问了不同的资源，但对如何将其放入我的代码感到困惑。

这是我的 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:

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('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";}
}

我没有包含“color4”，因为它不会显示任何内容，我希望它触发以启用选择。我应该更改或创建另一个 JS 来检查吗？我不知道从哪里开始。

Answer 1

据我了解。您可以在 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";
    }
  }
}