Question

我的代码没有禁用其他字段。请帮忙我试图选择参与者或参展商。选择参与者必须禁用其他字段。

Html

 <label> <span>Test:</span>
    <select  id="reg" name="reg" onkeyup="disableField()">
      <option value="" selected="selected" >Select Your Registration type  </option> 
      <option value="Male">Participant</option>
     <option value="Female">Exhibitor</option>
    </select>                                   
 </label>


<label> <span>test 1 field:</span>
   <input type="text"  name="test1" id="test1"/>
   </label>
   <label> <span>test field 2:</span>
   <input type="text"  name="test2" id="test2"/>
</label>

javascript

   var disableField = function () {
   var state = document.getElementById("reg").value === "Participant";
    document.getElementById("test1").disabled = state;
    document.getElementById("test2").disabled = state;
    };

Answer 1

不要使用内联javascript。它会使您的代码变得混乱而不能重复使用。

[编辑]这是一个适合你的例子：

<html>
   <head> <title></title></head>
   <body>
     <label> <span>Test:</span>
        <select  id="reg" name="reg">
          <option value="" selected="selected" >Select Your Registration type  </option> 
          <option value="Male">Participant</option>
         <option value="Female">Exhibitor</option>
        </select>                                   
     </label>

    <label> <span>test 1 field:</span>
       <input type="text"  name="test1" id="test1"/>
       </label>
       <label> <span>test field 2:</span>
       <input type="text"  name="test2" id="test2"/>
    </label>
   <script type="text/javascript">
//<!--
   var obj = document.getElementById("reg");
   obj.onchange = function(event){
     if(this.value=="Male"){
        document.getElementById("test1").disabled = 'disabled';
        document.getElementById("test2").disabled = 'disabled';
     }else{
        document.getElementById("test1").disabled = '';
        document.getElementById("test2").disabled = '';
     }
   }
   //--></script>
   </body>
</html>

[/编辑]

玩得开心，可能有消息来源。

Answer 2

首先，使用onchange：

<select  id="reg" name="reg" onchange="disableField()">

其次：

您的选项值为“男性”和“女性”。所以用它来比较：

var state = document.getElementById("reg").value == "Male";

Answer 3

在选择列表中添加更改

<select  id="reg" name="reg" onchange="SelectedIndexChanged(this)">

function SelectedIndexChanged(e){
    var selectedValue= e.value;
    //if Participant is selected
     if(selectedValue == "Participant "){
      document.getElementById("test1").disabled = true; 
      document.getElementById("test2").disabled = true; 
     }
    }

Answer 4

试试这个....它正在运作

<script type="text/javascript">

    function disableField() {
        var state = document.getElementById("reg").value === "Participant";
        if (state == false) {
            document.getElementById("test1").style.visibility = "hidden";
            document.getElementById("test2").style.visibility = "hidden";
        }
    };
</script>

Answer 5

试试这个，

<label> <span>Test:</span>
    <select  id="reg" name="reg" onchange="disableField();">
      <option value="" selected="selected" >Select Your Registration type  </option> 
      <option value="Male">Participant</option>
     <option value="Female">Exhibitor</option>
    </select>                                   
 </label>


<label> <span>test 1 field:</span>
   <input type="text"  name="test1" id="test1"/>
   </label>
   <label> <span>test field 2:</span>
   <input type="text"  name="test2" id="test2"/>
</label>

<强> JS

function disableField() {
    var val = document.getElementById("reg").value;
    if(val == 'Male') {
        document.getElementById("test1").disabled = true; 
        document.getElementById("test2").disabled = true; 
    } else {
        document.getElementById("test1").disabled = false; 
        document.getElementById("test2").disabled = false; 
    }
}

检查Male而不是Participant

的值

这是工作代码，

<html>
    <head>
        <script>
            function disableField() {
                alert('jdhsfg')
                var val = document.getElementById("reg").value;
                if(val == 'Male') {
                    document.getElementById("test1").disabled = true; 
                    document.getElementById("test2").disabled = true; 
                } else {
                    document.getElementById("test1").disabled = false; 
                    document.getElementById("test2").disabled = false; 
                }
            }
        </script>
    </head>

    <body>
        <label> <span>Test:</span>
            <select  id="reg" name="reg" onchange="disableField();">
                <option value="" selected="selected" >Select Your Registration type  </option> 
                <option value="Male">Participant</option>
                <option value="Female">Exhibitor</option>
            </select>                                   
        </label>


        <label> <span>test 1 field:</span>
            <input type="text"  name="test1" id="test1"/>
        </label>
        <label> <span>test field 2:</span>
            <input type="text"  name="test2" id="test2"/>
        </label>

    </body>
</html>

如何使用javascript禁用html中的字段

5 个答案: