单击单选按钮后启用 <select> <option>

debugcn 发表于 Dev

马文

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

当您单击第一个单选按钮时，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>

留言

普通的 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。