jQuery設(shè)置單選按鈕radio選中/不可用的實例代碼
因為本 part 是“jQuery日常使用篇”,所以都是由具體需求出發(fā),總結(jié)需要用到的知識點。代碼寫得未必很好,達到目標就好。那么我們先來看看這次的需求:色塊模式基于彩色模式,即開了彩色才能開色塊,彩色處于關(guān)閉的時候色塊不可用,開啟彩色時色塊radio可用,關(guān)閉彩色時如果色塊處于開的話需要把它關(guān)掉,大概就這樣。
我們先來看看演示效果:
我們接下來看看jQuery對單選按鈕 radio 的操作。
1. 彩色處于關(guān)閉的時候色塊不可用
需要兩步,當頁面打開時,檢測如果彩色關(guān)閉的話,讓色塊的“開”不可用:
if($("#coloroff[checked]")) { //alert("Hello Nowamagic!"); $("#blockon").attr("disabled", true); }
另外,當彩色開關(guān)切換時,即從開切換關(guān)時,讓色塊開不可用,同時選中色塊關(guān):
$("#coloroff").change(function(){ $("#blockon").attr("disabled", true); $("#blockoff").attr("checked",true); })
2. 當彩色從關(guān)切換開時,讓色塊可用,這很簡單:
$("#coloron").change(function(){ $("#blockon").attr("disabled", false); })
全部代碼為:
$(document).ready(function(){ if($("#coloroff[checked]")) { //alert("Hello Nowamagic!"); $("#blockon").attr("disabled", true); } $("#coloroff").change(function(){ $("#blockon").attr("disabled", true); $("#blockoff").attr("checked",true); }) $("#coloron").change(function(){ $("#blockon").attr("disabled", false); }) });
補充幾個知識點:
checkbox, radio 這些控件都沒有readonly屬性,需要用 disabled 屬性來切換它們的“可用/不可用”狀態(tài)。
設(shè)置 radio 不可用可以用 attr() 方法,即attr("disabled", true)。
設(shè)置 radio 的選中狀態(tài)也是用 attr() 方法,attr("checked",true)。
以上所述是小編給大家介紹的jQuery設(shè)置單選按鈕radio選中/不可用的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
幻燈片帶網(wǎng)頁設(shè)計中的20個奇妙應(yīng)用示例小結(jié)
幻燈片效果在網(wǎng)站中的使用非常流行,使用幻燈片效果既能在有限的網(wǎng)頁空間內(nèi)展示更多的內(nèi)容,又能增強視覺趣味,網(wǎng)上眾多的幻燈片插件資源也使得幻燈片的實現(xiàn)變得十分簡單2012-05-05jQuery使用ajax傳遞json對象到服務(wù)端及contentType的用法示例
這篇文章主要介紹了jQuery使用ajax傳遞json對象到服務(wù)端及contentType的用法,結(jié)合實例形式分析了jQuery使用ajax傳遞json對象數(shù)據(jù)及服務(wù)器響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2020-03-03基于Jquery的回車成tab焦點切換效果代碼(Enter To Tab )
基于Jquery的回車成tab焦點切換效果代碼(Enter To Tab ),需要的朋友可以參考下。2010-11-11jQuery實現(xiàn)的checkbox級聯(lián)選擇下拉菜單效果示例
這篇文章主要介紹了jQuery實現(xiàn)的checkbox級聯(lián)選擇下拉菜單效果,涉及jQuery鼠標事件響應(yīng)及表格table動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12