Javascript 禁用特定单选按钮上的选择元素检查

我正在尝试禁用选择color1、color2和color3按钮时的选择。我想在选中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>

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

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

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

---

请像那样改变你的js

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

---

请像那样改变你的js

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

---

根据您的帖子以及我从您对初始帖子和答案的评论中推断出的信息，我认为您正试图实现我在下面的spinet中复制的目标：

默认情况下不显示选择选项，而是将其隐藏，以便仅在选择color4单选按钮时显示该选项，从而使其更加用户友好，从而改善用户体验

var color=document.queryselectoral'input[name=color]， DisplaySelectedColor=document.getElementByIdcolor\u显示， 选择option=document.getElementByIdother\u颜色； 对于颜色中的var i{ 颜色[i]。onclick=函数{ 如果document.getElementById'color1'.checked==true{ DisplaySelectedColor.style.display=块； DisplaySelectedColor.innerText=橙色； 选择option.style.display=none； } 如果document.getElementById为'color2'。选中==true{ DisplaySelectedColor.style.display=块； DisplaySelectedColor.innerText=白色； 选择option.style.display=none； } 如果document.getElementById'color3'.checked==true{ DisplaySelectedColor.style.display=块； DisplaySelectedColor.innerText=红色； 选择option.style.display=none； } 如果document.getElementById为'color4'。选中==true{ DisplaySelectedColor.style.display=无； 选择Option.style.display=block； } }; } -选择一个- 黑色 粉红色 绿色

---

根据您的帖子以及我从您对初始帖子和答案的评论中推断出的信息，我认为您正试图实现我在下面的spinet中复制的目标：

默认情况下不显示选择选项，而是将其隐藏，以便仅在选择color4单选按钮时显示该选项，从而使其更加用户友好，从而改善用户体验

var color=document.queryselectoral'input[name=color]， DisplaySelectedColor=document.getElementByIdcolor\u显示， 选择option=document.getElementByIdother\u颜色； 对于颜色中的var i{ 颜色[i]。onclick=函数{ 如果document.getElementById'color1'.checked==true{ DisplaySelectedColor.style.display=块； DisplaySelectedColor.innerText=橙色； 选择option.style.display=none； } 如果document.getElementById为'color2'。选中==true{ DisplaySelectedColor.style.display=块； DisplaySelectedColor.innerText=白色； 选择option.style.display=none； } 如果document.getElementById'color3'.checked==true{ DisplaySelectedColor.style.display=块； DisplaySelectedColor.innerText=红色； 选择option.style.display=none； } 如果document.getElementById为'color4'。选中==true{ DisplaySelectedColor.style.display=无； 选择Option.style.display=block； } }; } -选择一个- 黑色 粉红色 绿色

---

我想在选中右单选按钮时启用它。-你说的右单选按钮是什么意思？我是否要在下拉列表中显示与选中的颜色相同的颜色？二,。如果选择了其他单选按钮，你想禁用下拉列表吗？哦，天哪，对不起，这里我想说的是，当选择color1、color2和color3按钮时，禁用选择。我想在选中color4单选按钮时启用它。我想在选中右单选按钮时启用它。-你说的右单选按钮是什么意思？我是否要在下拉列表中显示与选中的颜色相同的颜色？二,。如果选择了其他单选按钮，你想禁用下拉列表吗？哦，天哪，对不起，这里我想说的是，当选择color1、color2和color3按钮时，禁用选择。我想在选中color4单选按钮时启用它。如果要在下拉列表中显示选定的颜色，请告诉我。如果要在下拉列表中显示选定的颜色，请告诉我。