Question

我试图禁用＆＃34;选择＆＃34;当＆＃34; color1，color2和color3＆＃34;按钮被选中。我希望在＆＃34; color4＆＃34;单选按钮被检查。我去了不同的资源，并对如何将它放入我的代码感到困惑。

这是我的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";}
}

我还没有包含＆＃34; color4＆＃34;因为它不会显示任何内容，我希望它能够触发启用选择。我应该更改或创建另一个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";
    }
  }
}

Answer 2

请改变你的js。

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

Answer 3

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: