JavaScript代碼不起作用

我試圖編碼它，就好像當我解開復選框時，下拉菜單的兩個選項都應該變爲只讀，但是當前只有第二個下拉菜單變爲只讀，第一個不會變成只讀只讀並保持可編輯，這裏有什麼問題？爲什麼只有在取消選中複選框後，第一個下拉菜單纔會變爲只讀狀態？JavaScript代碼不起作用

<html> 
 
    <head> 
 
    <script type="text/javascript"> 
 
    function myFunction() { 
 
     document.getElementById("1").disabled = false; 
 
    } 
 
    
 
    function mySecondFunction() { 
 
    var ddl = document.getElementById("1"); 
 
    var selectedValue = ddl.options[ddl.selectedIndex].value; 
 
     if (selectedValue == "ExceptionZero") 
 
     { 
 
     document.getElementById("mySelection").disabled = true; 
 
    \t //set default 
 
    \t document.getElementById("mySelection").value = "OptionZero" 
 
     }else { 
 
     document.getElementById("mySelection").disabled = false; 
 
     } 
 
     
 
    } 
 
    
 
    function myThirdFunction(){ 
 
    \t document.getElementById("mySelection").disabled = true; 
 
    \t //set default 
 
    \t document.getElementById("mySelection").value = "OptionZero" 
 
    \t 
 
    \t //first drop down 
 
    \t document.getElementById("1").disabled = true; 
 
    \t document.getElementById("1").value = "OptionZero" 
 
    } 
 
    
 
    </script> 
 
    
 
    </head> 
 
    <body> 
 
    <input type="checkbox" name="selectionbox" value="Yes" onclick="myFunction()" onchange="myThirdFunction()"/> 
 
    
 
    <select disabled id="1" onchange="mySecondFunction()"> 
 
    \t \t \t \t <option value="OptionZero">Default</option> 
 
    \t \t \t \t <option value="OptionOne">Car</option> 
 
    \t \t \t \t <option value="OptionTwo">Car2</option> 
 
    \t \t \t \t <option value="OptionThree">Car23</option> 
 
    </select> 
 
    <br> 
 
    \t <select disabled id="mySelection"> 
 
    \t \t \t \t <option value="OptionZero">Default</option> 
 
    \t \t \t \t <option value="OptionOne">A</option> 
 
    \t \t \t \t <option value="OptionTwo">B</option> 
 
    \t \t \t \t <option value="OptionThree">C</option> 
 
    \t </select> 
 
    </body> 
 
    </html>

來源

2014-10-10 Hassan Chaudhry

你爲什麼使用onclick和onchange兩個函數。你不能用嗎？ – TBI 2014-10-10 14:02:57

由於myFunction被稱爲onclick，並且這發生在onchange事件之後，因此每次單擊複選框時總是將disabled設置爲false。 – Namrehs 2014-10-10 14:04:02

我不確定，如果事件的觸發順序（點擊和更改）在不同的瀏覽器中是相同的。無論如何，您應該只使用一個事件來檢測更改，通常是在複選框上單擊'click'，因爲'change'不會在所有瀏覽器中立即觸發。 – Teemu 2014-10-10 14:07:07

你的onClick事件onChange事件後再次被調用，導致箱1，以啓用。嘗試改變你的onclick這個並刪除你的thirdFunction事件。

JSFiddle

function myFunction() { 
     if (document.getElementById("1").disabled == false) { 
      document.getElementById("mySelection").disabled = true; 
      //set default 
      document.getElementById("mySelection").value = "OptionZero" 

      //first drop down 
      document.getElementById("1").disabled = true; 
      document.getElementById("1").value = "OptionZero"  
     } else { 
      document.getElementById("1").disabled = false; 
     } 
    }

事件調用的順序可以通過瀏覽器有所不同，所以你應該只有一個事件時，爲了使對輸出的差異。

來源

2014-10-10 14:13:00 Grice

JavaScript代碼不起作用

回答

相關問題