使用JavaScript隱藏和禁用基於組合框值的元素

我有一個頁面，根據組合框的值是否爲false（否），應該隱藏input框並禁用fieldset。當組合框的值更改爲true（是）時，窗體應顯示input框並啓用fieldset。使用JavaScript隱藏和禁用基於組合框值的元素

這是我到目前爲止有：

<html> 
<head> 
<title>combo</title> 
<script language="javascript"> 
    function ToggleDisplay(Section, boolHide) { 
     if (boolHide == true) { 
      Section.style.display = "none"; 
     } 
     else { 
      Section.style.display = ""; 
     } 
    } 

    function disableElement(element, boolHide) 
    { 
     var input = 
      document.getElementById(element).getElementsByTagName("input"); 
      for(var i = 0; i < input.length; i++) 
      { 
       input[i].setAttribute("disabled",boolHide); 
      } 
     } 

     function hideShowElement(CurrentSection, OtherSection, DisableSection) 
     { 
      var sectionVal = CurrentSection.value; 
       if (sectionVal == 0) { 
        ToggleDisplay(OtherSection, true); 
        //disableGroup (this.form, 'Radio1' , true); 
        disableElement(DisableSection, "true"); 
       } 
       else { 
        ToggleDisplay(OtherSection, false); 
        //disableGroup (this.form, 'Radio1' , true); 
        disableElement(DisableSection, "false"); 
       } 
      } 
</script> 
</head> 
<body> 
<form name="testForm" action="" method="post"> 
    Show Hidden Text? <select name="cmbYN" 
     onchange="hideShowElement(this, MyDIV, 'OptionGrp1');"> 
     <option value="0" selected="selected"></option> 
     <option value="1">Yes</option> 
     <option value="0">No</option> 
    </select> 

    <div id="MyDIV" style="display: none"> 
     My Hidden Text: <input name="Text1" type="text" /> 
    <br> 
    </div> 
    <fieldset id="OptionGrp1" name="Group1"> 
     Option Group<br><br> 
     Option 1<input name="Radio1" type="radio" checked> 
     Option 2<input name="Radio1" type="radio"> 
    </fieldset> 
</form> 
</body> 
</html>

這是隱藏input箱和禁用fieldset，而不是重新啓用它們。

來源

2011-11-30 Rick

個人喜歡添加/刪除一個類（如「隱藏」），因爲得到圍繞這個棘手的問題，必須弄清楚你改變它之前的風格。通過一門課程，您可以將演示文稿（即隱藏/不隱藏）留給CSS。 – Pointy

但請注意，您無法使用CSS啓用/禁用。 – Pointy

您應該將顯示改回原來的狀態，通常是阻止。

 if (boolHide){ 
      Section.style.display = "none"; 
     }else { 
      Section.style.display = "block"; 
     }

還爲殘疾人，正確的方法是設置殘疾人屬性爲禁用，之後將其取出：

  for(var i = 0; i < input.length; i++) 
      { 
       if(boolHide){ 
        input[i].setAttribute("disabled", "disabled"); 
       }else{ 
        input[i].removeAttribute("disabled"); 
       } 
      }

來源

2011-11-30 20:32:07 jValdron

另一點，通常認爲布爾值不會像這樣測試。使用簡單的'if（boolHide）'或'if（！boolHide）' – Oybek

是的真的，該死的我與我的複製粘貼:)我也改變了答案正確回答殘疾部分。 – jValdron

使用JavaScript隱藏和禁用基於組合框值的元素

回答

相關問題