2012-09-12 100 views
4

我真的不知道多少的Javascript然而,我希望有人可以幫助我瞭解如何解決我的問題(禁用)HTML的textarea:灰色出時複選框被選中

我的HTML表單有一個checkbox和那麼textarea

<form> 
<input type="checkbox" name="detailsgiven" /> 
<textarea name="details"></textarea> 
</form> 

我希望它這樣,當checkbox被選中,使用戶無法點擊它,然後輸入文本textarea被禁用。

我已經看過這裏和谷歌,我找不到任何明確的例子如何做到這一點。

我猜這可以在JavaScript中完成,但我感覺有點超出我的深度。有人可以向我解釋如何做到這一點,最好不使用第三方庫?

+0

當textarea被禁用?我對此不清楚? – swemon

+0

嗨,我編輯了這個問題。對不起,它不是很清楚。 – Sophie

+0

你的意思是當複選框被選中時,textarea被啓用? – swemon

回答

8
<form> 
<input type="checkbox" name="detailsgiven" onchange="toggleDisabled(this.checked)"/> 
<textarea name="details" id="tb1"></textarea> 
</form> 

<script> 
function toggleDisabled(_checked) { 
    document.getElementById('tb1').disabled = _checked ? true : false; 
} 
</script> 
+1

'_checked'值如何傳遞給函數? – Sophie

+0

糟糕!現在編輯答案。 :-) – techfoobar

+0

非常感謝!〜<3 – Sophie

0

這非常容易做到與jQuery。每個人都使用jQuery,所以你應該;-)。

<form> 
    <input type="checkbox" name="detailsgiven" id="detailsgiven" /> 
    <textarea name="details" id="details"></textarea> 
</form> 

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    $("#detailsgiven").change(function() { 
     if($(this).is(":checked")) {     
      $("#details").attr("disabled", "disabled"); 
     } 
     else { 
      $("#details").removeAttr("disabled"); 
     } 
    }); 
}); 
</script> 
0

試試這個:

if ($('input:checkbox').is(':checked')) { 
    $('textarea').attr('disabled', 'disabled'); 
} 
+0

這當然需要jQuery。 – chris

0
<form> 
<input type="checkbox" name="detailsgiven" onclick="document.getElementById('t').setAttribute('disabled','disabled');" /> 
<textarea id="t" name="details"></textarea> 
</form> 

注意如何使用複選框onclick事件來執行一些JavaScript代碼。

如果你給你的html元素ID,你可以通過javascript DOM(文檔對象模型)的getElementById方法訪問javascripts中的元素。

一旦你有了元素,你可以設置/獲取它的屬性,做很多事情。

+0

感謝您的解釋。這很有道理。您不必將Javascript代碼放在'

  • 11. 力複選框被選中
  • 12. JS複選框被選中
  • 13. Jquery複選框被選中?
  • 14. 當複選框被選中
  • 15. 當複選框被選中
  • 16. 當選中RecyclerView中的複選框時,多個複選框也被選中
  • 17. 複選框灰顯文字
  • 18. 當複選框2被選中時取消選中複選框1
  • 19. 當選中一個複選框時,多個複選框會被選中?
  • 20. 灰色複選框時,檢查另一個
  • 21. 當複選框被選中時出現輸入文字?
  • 22. 即使在複選框被選中時也會出錯
  • 23. 將複選框的背景設置爲白色,並在Android中刪除灰色未選中的複選標記
  • 24. 複選框被隨機抽查和未選中時,我勾選複選框
  • 25. AlertDialog中的複選框被TextView「推出」
  • 26. 複選框上的火災事件.change()*在複選框出現後被選中。
  • 27. 灰色的文本框,直到啓用複選框
  • 28. 當複選框被選中或未選中時執行操作
  • 29. 動態複選框被選中/取消選中時的警報
  • 30. MS Access窗體中的複選框內的灰色陰影