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

Question

I have a group of 2 radio buttons and 2 classes with 'select' options. 我有一组2个单选按钮和2个带有“选择”选项的类。

When you click on the first radio button the select options from class1 enable when you click on the second the select options from class must be enable. 当您单击第一个单选按钮时，将启用来自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

Plain javascript is not my forte so it might not be pretty but it works. 普通的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>

Answer 2

If you want use your code you to have add this two lines 如果要使用您的代码，则必须添加这两行

document.getElementsByClassName("one")[0].selected="selected";

and 和

document.getElementsByClassName("two")[0].selected="selected";

In this situation the user when click on one radio button get default value 1 or 4. below there is an example 在这种情况下，用户单击一个单选按钮时将获得默认值1或4。下面有一个示例

 <!DOCTYPE html> <html> <head> <title>Page Title</title> <script type="text/javascript"> function myFunction1() { document.getElementsByClassName("one")[0].disabled = false; document.getElementsByClassName("one")[0].selected="selected"; 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> <script type="text/javascript"> function myFunction2() { 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")[0].selected="selected"; document.getElementsByClassName("two")[1].disabled = false; document.getElementsByClassName("two")[2].disabled = false; } </script> </head> <body> <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> </body> </html>

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-10-16 20:56:49

解决方案2
0 2018-10-16 22:57:01

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-10-16 20:56:49

解决方案2 0 2018-10-16 22:57:01

解决方案1
1 已采纳 2018-10-16 20:56:49

解决方案2
0 2018-10-16 22:57:01