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

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

javascript html

如何使用javascript禁用html中的字段,javascript,html,Javascript,Html,我的代码没有禁用其他字段。请帮忙我正在尝试选择参与者或参展商。选择参与者后，必须禁用其他字段 Html <label> <span>Test:</span> <select id="reg" name="reg" onkeyup="disableField()"> <option value="" selected="selected" >Select Your Registration type </

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

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>

首先，使用onchange：

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

不要使用内联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>


测试：
选择您的注册类型
参与者
参展商
测试1字段：
试验场2：
//

[/编辑]

祝您玩得开心，并希望源代码与您在一起。

在选择列表中添加更改

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


已选择的函数索引已更改（e）{
var selectedValue=e.value；
//如果选择了参与者
如果（selectedValue==“参与者”）{
document.getElementById（“test1”）.disabled=true；
document.getElementById（“test2”）.disabled=true；
}
}

试试这个……它正在工作

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


函数disableField（）{
var state=document.getElementById（“reg”）.value==“参与者”；
if（state==false）{
document.getElementById（“test1”）.style.visibility=“hidden”；
document.getElementById（“test2”）.style.visibility=“hidden”；
}
};

试试这个

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

检查

男性

非

参与者

这是工作代码

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


函数disableField（）{
警报（'jdhsfg'）
var val=document.getElementById（“reg”）值；
如果（val=‘男性’）{
document.getElementById（“test1”）.disabled=true；
document.getElementById（“test2”）.disabled=true；
}否则{
document.getElementById（“test1”）.disabled=false；
document.getElementById（“test2”）.disabled=false；
}
}
测试：
选择您的注册类型
参与者
参展商
测试1字段：
试验场2：

禁用其他字段是什么意思？你的意思是这些不可编辑吗？我不希望它们可编辑这也不起作用函数disableField（）{var val=document.getElementById（“regtype”）.value；if（val=='part'）{document.getElementById（“org”）.disabled=true；document.getElementById（“dept”）.disabled=true；}否则{document.getElementById（“org”）.disabled=false；document.getElementById（“dept”）.disabled=false；}}非常感谢您的逻辑工作，但不是此代码，而是它背后的原因我在onchange（）中放了什么？您不应该使用“onchange（）”或HTML中的类似属性。上面javascript的要点是，获取元素并给它一个onchange函数。如果您的代码不起作用，请确保将javascript放在正文的末尾，否则它将找不到元素“reg”，因为它是在正文中加载的。它无法工作，因为reg的值是“男性”或“女性”，而不是“参与者”；）为什么不传递元素，而是从dom获取它？这是一种糟糕的风格。@mondjunge为您更改了它。：）@雷克斯：谢谢，我只是想指出这一点，因为每个人似乎都这么做。事实上，我甚至认为onchange属性是一个坏习惯，不应该使用。但是我是jQuery的粉丝，我还应该说什么呢……）既然您已经获得了元素，为什么不将其传递给disableFields，而是在函数中通过Id获取它？@mondjunge是的，您是对的<代码>这是一条路要走。但是，请注意，我只是指出了他错在哪里。他不应该指望别人提供现成的代码。他最好接受暗示。

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

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

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