javascript - 单击单选按钮后启用<选择> <选项>

Question

我有一组 2 个单选按钮和 2 个带有“选择”选项的类。

当您单击第一个单选按钮时，必须启用来自 class1 的选择选项；当您单击第二个单选按钮时，必须启用来自 class1 的选择选项。

<input type="radio" onchange="myFunction1()" name="enable" >1  <br>
    <input  type="radio" onchange="myFunction2()" name="enable">2 <br>


            <select name="Reden"> 
        <option class="one" value="1" disabled >1</option>
        <option class="one" value="2" disabled >2</option>
        <option class="one" value="3" disabled  >3</option>
        <option class="two" value="4" disabled>4</option>
        <option class="two" value="5" disabled>5</option>
        <option class="two" value="6" disabled>6</option>

        <script type="text/javascript">
            function myFunction1() {
        document.getElementsByClassName("one")[0].disabled = true;
        document.getElementsByClassName("one")[1].disabled = true;
        document.getElementsByClassName("one")[2].disabled = true;
        document.getElementsByClassName("two")[0].disabled = false;
        document.getElementsByClassName("two")[1].disabled = false;
        document.getElementsByClassName("two")[2].disabled = false;
        }
        </script>

        <script type="text/javascript">
            function myFunction2() {
        document.getElementsByClassName("one")[0].disabled = false;
        document.getElementsByClassName("one")[1].disabled = false;
        document.getElementsByClassName("one")[2].disabled = false;
        document.getElementsByClassName("two")[0].disabled = true;
        document.getElementsByClassName("two")[1].disabled = true;
        document.getElementsByClassName("two")[2].disabled = true;

        }
        </script>

Answer 1

简单的 javascript 不是我的强项，所以它可能不漂亮，但它可以工作。

var select = document.getElementById("Reden")
var enabler = document.getElementsByName("enable")
var allOptions = select.getElementsByTagName("option");

// Add a listener for the radio changes
for (var i = 0, len = enabler.length; i < len; i++) {
  enabler[i].addEventListener('click', optionToggle);
}

// Disables all options and reenables those that match the value of the radio
function optionToggle() {
  filterOptions = select.getElementsByClassName(this.value)
  select.value = ""
  setDisabled(allOptions, true)
  setDisabled(filterOptions, false)
}

function setDisabled(targetList, value) {
  for (var i = 0; i < targetList.length; i++) {
    targetList[i].disabled = value;
  }
}

<input type="radio" value="1" name="enable">1 <br>
<input type="radio" value="2" name="enable">2 <br>


<select id="Reden">
  <option class=1 value="1" disabled="">1</option>
  <option class=1 value="2" disabled="">2</option>
  <option class=1 value="3" disabled="">3</option>
  <option class=2 value="4" disabled="">4</option>
  <option class=2 value="5" disabled="">5</option>
  <option class=2 value="6" disabled="">6</option>
</select>