如何使用Javascript複選框禁用/啓用表單元素？

Question

我不知所措 - 令人頭大我的大腦幾個小時就這一個之後，現在是時候在這裏拋出的問題。

我想有一個複選框執行一些JavaScript代碼，當檢查，使一些表單元素，和未選中時，再次禁用這些元素。

下面是我的JavaScript：

function houseclean() 
{ 
if (document.orderform.cleaning.checked == true) 
    { 
    document.orderform.rooms.disabled = false; 
    document.orderform.datetime.disabled = false; 
    document.orderform.howoften.disabled = false; 
    } 
else 
    { 
    document.orderform.rooms.disabled = true; 
    document.orderform.datetime.disabled = true; 
    document.orderform.howoften.disabled = true; 
    } 
} 

這是我的HTML代碼：

<form id="orderform" style="margin-left: 6cm"> 
<input type="checkbox" name="cleaning" value="yes" onclick="houseclean()"/> Home cleaning <br /> 
Service: <select name="rooms" id="rooms" disabled > 
    <option value="1bedroom">One Bedroom Apt</option> 
    <option value="2bedroom">Two Bedroom Apt</option> 
    <option value="3bedroom">Three Bedroom Townhome or SF Home</option> 
    <option value="4bedroom">Four Bedroom Home</option> 
    <option value="5bedroom">Five Bedroom Home</option> 
    <option value="6bedroom">Six Bedroom Home</option> 
</select> <br /> 
Date/Time: <input type="text" name="datetime" disabled /><br /> 
How often would you like a cleaning?: <select name="howoften" disabled> 
    <option value="once">One Time Only</option> 
    <option value="2bedroom">Every Week</option> 
    <option value="3bedroom">Every Other Week</option> 
    <option value="4bedroom">Once a Month</option> 
</select> <br /> 
</form> 

Answer 1

此代碼將這樣的伎倆。你應該明確你的元素ID並儘可能使用getElementById。

的HTML：

<form id="orderform" style="margin-left: 6cm;"> 
<input type="checkbox" id="cleaning" name="cleaning" value="yes" onclick="javascript:houseclean();"/> Home cleaning <br /> 
Service: <select name="rooms" id="rooms" disabled > 
    <option value="1bedroom">One Bedroom Apt</option> 
    <option value="2bedroom">Two Bedroom Apt</option> 
    <option value="3bedroom">Three Bedroom Townhome or SF Home</option> 
    <option value="4bedroom">Four Bedroom Home</option> 
    <option value="5bedroom">Five Bedroom Home</option> 
    <option value="6bedroom">Six Bedroom Home</option> 
</select> <br /> 
Date/Time: <input type="text" id="datetime" name="datetime" disabled /><br /> 
How often would you like a cleaning?: <select id="howoften" name="howoften" disabled> 
    <option value="once">One Time Only</option> 
    <option value="2bedroom">Every Week</option> 
    <option value="3bedroom">Every Other Week</option> 
    <option value="4bedroom">Once a Month</option> 
</select> <br /> 
</form>​ 

和JavaScript：

function houseclean() 
{ 
if (document.getElementById('cleaning').checked == true) 
    { 
    document.getElementById('rooms').removeAttribute('disabled'); 
    document.getElementById('datetime').removeAttribute('disabled'); 
    document.getElementById('howoften').removeAttribute('disabled'); 
    } 
else 
    { 
    document.getElementById('rooms').setAttribute('disabled','disabled'); 
    document.getElementById('datetime').setAttribute('disabled','disabled'); 
    document.getElementById('howoften').setAttribute('disabled','disabled'); 
    } 
} 

的jsfiddle例如：http://jsfiddle.net/HQQ4n/10/

Answer 2

我得到了你的代碼工作。我將id屬性添加到表單元素，並使用document.getElementById來保證安全。

JFiddle例如：http://jsfiddle.net/vxRjw/1/

Answer 3

不是超級健壯的，但動態jquery的溶液...

$("#mycheckbox").click(function() { 
    enableFormElements("#myform", $(this).attr('checked')); 
}); 

function enableFormElements(form, enable) { 
     var fields = ["checkbox","textarea","select"]; 
     var selector = form+" input"; 
     $.each(fields, function(i,e) { selector += ","+form+" "+e; }); 
     $(selector).each(function(idx) { 
      if (enable) { 
       $(this).removeAttr("disabled"); 
       $(this).removeAttr("readonly"); 
      } else { 
       $(this).attr("disabled","disabled"); 
       $(this).attr("readonly","readonly"); 
      } 
      if ($(this).is("select") || $(this).is("textarea")) { 
       var id = $(this).attr("id"); 
       var txt_equiv = id+"_text"; 
       var val = $(this).find("option[value='"+$(this).val()+"']").text(); 
       // dynamically add the span to this element...so you can switch back and forth... 
       if ($(this).parent().find("span").length == 0) { 
        $(this).parent().append("<span class='record_display_text' id='"+txt_equiv+"'>"+val+"</span>"); 
       } 
      } 
      if ($("#"+txt_equiv).length != 0) { 
       if (enable) { 
        $("#"+id).show(); 
        $("#"+txt_equiv).hide(); 
       } else { 
        $("#"+txt_equiv).show(); 
        $("#"+id).hide(); 
       } 
      } 
     }); 
} 

功能基本上看起來爲所有輸入，選擇，發現所提供的元件和禁用或內文字區域啓用每一個。如果使用JQuery 1.9，您可能希望將其更改爲道具設置，但我發現並非所有的瀏覽器都能一直使用它。 （的Bleh）。在textareas或選擇的情況下，它實際上會創建一個相關的跨度，其id與輸入相匹配，但後面跟着「_text」。如果您的網頁上有其他ID可能會發生衝突，您可能需要編輯該內容...但將其置於適當的位置允許代碼稍後隱藏/顯示文本或實際的select/textarea，具體取決於您是否希望啓用所有功能或禁用。再次，沒有在所有情況下測試，但隨時複製和編輯您的目的...

哦，並確保所有選擇或textareas是他們的父母的唯一的孩子...在一個跨度換行if你要因爲它動態地將同一個父內的相關跨度...因此，如果選擇或文本域不在父包（如跨度，股利，或TD或東西），那麼它可能會引發的生成的文本隨機地位於某處。 ：P

然後你就可以添加一些CSS製作表單元素看起來更像正常的網頁或標準span元素...

input[readonly], 
    select[readonly], 
    textarea[readonly] { 
     cursor: default; 
    } 

    input[disabled] { 
     background-color:#F0F0F0; 
     border:none; 
     -moz-box-shadow: none; 
     -webkit-box-shadow:none; 
     box-shadow:none; 
     padding: 0; 
    } 

你可能會想改變背景顏色，以配合您彩頁...和「光標：默認」一個是，如果引導Twitter是將惱人的「限制」光標或不管它是在禁用的元素......但不管怎麼說，這是我來到了這個晚上的解決方案，它的爲我工作。 :)