兩種唯讀的方法:1、使用attr()為複選框新增disabled屬性,語法「$("input[type='checkbox']").attr("disabled",true );”;2、使用click()設定複選框點擊時不進行checkbox狀態改變,語法“$("input[type='checkbox']").click(function(){return false;})” 。
本教學操作環境:windows7系統、jquery3.6.0版本、Dell G3電腦。
提到只讀,很容易想到使用readonly屬性,但是對於複選框(checkbox)來說,這個屬性和期望得到的效果是有差別的。原因在於readonly屬性關聯的是頁面元素的value屬性(例如textbox,設定了readonly就不能修改輸入框的文字內容),而複選框的勾選/取消並不會改變其value屬性,改變的只是一個checked狀態。所以對於checkbox來說,設定了readonly,仍然是可以勾選/取消的。
<input type="checkbox" readonly>option a<br> <input type="checkbox" readonly>option b<br> <input type="checkbox" readonly>option c<br>
但和readonly類似的,還有一個disabled屬性,這個屬性的作用是設定頁面元素為不可用,即不可進行任何互動操作(包括不可修改value屬性、不可修改checked狀態等)。
<input type="checkbox" disabled>option a<br> <input type="checkbox" disabled>option b<br> <input type="checkbox" disabled>option c<br>
方法1:
而在jquery中,可以使用attr()為複選框(checkbox)新增disabled屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("input[type='checkbox']").attr("disabled", true); }); }); </script> </head> <body> <input type="checkbox">option a<br> <input type="checkbox">option b<br> <input type="checkbox">option c<br> <br> <button>让复选框只读</button> </body> </html>
方法2:
#如果使用disabled=「disabled」屬性的話,會讓checkbox變成灰色的,使用者可能會反感效果,也可以設定複選框(checkbox)點擊時不進行狀態改變。
$(document).ready(function() { $("button").click(function() { $("input[type='checkbox']").click( function(){return false;} ); }); });
相關影片教學推薦:jQuery教學(影片)
以上是jquery怎麼讓checkbox只讀的詳細內容。更多資訊請關注PHP中文網其他相關文章!