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

我的代碼未禁用其他字段。請幫助我正在嘗試選擇參與者或參展商。一旦參與者被選中，其他領域必須禁用。如何在html中使用javascript禁用字段

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

來源

2013-10-09 Inventor

什麼你的意思「禁用其他領域」？意思是這些不可編輯？ – reporter

我不希望它們是可編輯的 – Inventor

首先，使用的onchange：

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

其次：

你的選項值是 '男性' 和「女性」。所以用這個來比較：

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

來源

2013-10-09 08:34:50 Abhitalks

爲什麼不把它傳遞給disableFields，當你已經知道了，而是通過函數中的Id來獲取它呢？ – mondjunge

@mondjunge是的，你是對的。 '這是'要走的路。但請注意，我只是指出他錯在哪裏。他不應該期望別人提供現成的代碼。通過暗示他會更好。 – Abhitalks

不要使用內聯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>

[/編輯]

有樂趣和可能來源與你同在。

來源

2013-10-09 08:41:20 mondjunge

我在onchange（）中放什麼？ – Inventor

您不應該在HTML中使用「onchange（）」或類似的屬性。上面的javascript中的一點是，你獲取你的元素並給它一個onchange函數。如果你的代碼不工作，一定要將javascript放在body的末尾，否則它不會找到元素「reg」，因爲它是在body中加載的。 – mondjunge

再次檢查答案。它現在有一個工作的例子。 – mondjunge

上的變化在選擇列表中添加

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

來源

2013-10-09 08:42:56 Rex

這沒有奏效。 – Inventor

爲什麼你不通過元素，而是從dom中獲得它？這是不好的風格。 – mondjunge

@mondjunge爲您更改。 :) – Rex

試試這個....這是工作

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

來源

2013-10-09 08:48:44

抱歉，但這還沒有奏效 – Inventor

它不能工作，因爲reg的值是「Male」或「Female」，但從來沒有「Participant」;） – 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>

爲

校驗值不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>

來源

2013-10-09 08:55:58

這也不起作用函數disableField（）{0} {0} {0} {0}} 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; } } – Inventor

非常感謝你的邏輯工作，但不是這個代碼，但它背後的原因 – Inventor

我有工作代碼 –

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

回答

相關問題