jQuery設(shè)置單選按鈕radio選中/不可用的實(shí)例代碼
因?yàn)楸?part 是“jQuery日常使用篇”,所以都是由具體需求出發(fā),總結(jié)需要用到的知識點(diǎn)。代碼寫得未必很好,達(dá)到目標(biāo)就好。那么我們先來看看這次的需求:色塊模式基于彩色模式,即開了彩色才能開色塊,彩色處于關(guān)閉的時候色塊不可用,開啟彩色時色塊radio可用,關(guān)閉彩色時如果色塊處于開的話需要把它關(guān)掉,大概就這樣。
我們先來看看演示效果:

我們接下來看看jQuery對單選按鈕 radio 的操作。
1. 彩色處于關(guān)閉的時候色塊不可用
需要兩步,當(dāng)頁面打開時,檢測如果彩色關(guān)閉的話,讓色塊的“開”不可用:
if($("#coloroff[checked]"))
{
//alert("Hello Nowamagic!");
$("#blockon").attr("disabled", true);
}
另外,當(dāng)彩色開關(guān)切換時,即從開切換關(guān)時,讓色塊開不可用,同時選中色塊關(guān):
$("#coloroff").change(function(){
$("#blockon").attr("disabled", true);
$("#blockoff").attr("checked",true);
})
2. 當(dāng)彩色從關(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);
})
});
補(bǔ)充幾個知識點(diǎn):
checkbox, radio 這些控件都沒有readonly屬性,需要用 disabled 屬性來切換它們的“可用/不可用”狀態(tài)。
設(shè)置 radio 不可用可以用 attr() 方法,即attr("disabled", true)。
設(shè)置 radio 的選中狀態(tài)也是用 attr() 方法,attr("checked",true)。
以上所述是小編給大家介紹的jQuery設(shè)置單選按鈕radio選中/不可用的實(shí)例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- jQuery獲取選中單選按鈕radio的值
- JQuery radio(單選按鈕)操作方法匯總
- jquery判斷單選按鈕radio是否選中的方法
- jQuery獲取單選按鈕radio選中值與去除所有radio選中狀態(tài)的方法
- 基于jquery自定義的漂亮單選按鈕RadioButton
- jquery實(shí)現(xiàn)標(biāo)簽支持圖文排列帶上下箭頭按鈕的選項(xiàng)卡
- jQuery模仿單選按鈕選中效果
- jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊 全選/反選 單選框/復(fù)選框 文本框 表單驗(yàn)證
- JQuery操作單選按鈕以及復(fù)選按鈕示例
- jQuery實(shí)現(xiàn)全選按鈕
相關(guān)文章
幻燈片帶網(wǎng)頁設(shè)計(jì)中的20個奇妙應(yīng)用示例小結(jié)
幻燈片效果在網(wǎng)站中的使用非常流行,使用幻燈片效果既能在有限的網(wǎng)頁空間內(nèi)展示更多的內(nèi)容,又能增強(qiáng)視覺趣味,網(wǎng)上眾多的幻燈片插件資源也使得幻燈片的實(shí)現(xiàn)變得十分簡單2012-05-05
jQuery使用ajax傳遞json對象到服務(wù)端及contentType的用法示例
這篇文章主要介紹了jQuery使用ajax傳遞json對象到服務(wù)端及contentType的用法,結(jié)合實(shí)例形式分析了jQuery使用ajax傳遞json對象數(shù)據(jù)及服務(wù)器響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
基于Jquery的回車成tab焦點(diǎn)切換效果代碼(Enter To Tab )
基于Jquery的回車成tab焦點(diǎn)切換效果代碼(Enter To Tab ),需要的朋友可以參考下。2010-11-11
jQuery實(shí)現(xiàn)的checkbox級聯(lián)選擇下拉菜單效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的checkbox級聯(lián)選擇下拉菜單效果,涉及jQuery鼠標(biāo)事件響應(yīng)及表格table動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
jQuery實(shí)現(xiàn)簡單的計(jì)時器功能實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的計(jì)時器功能,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)倒計(jì)時60秒的具體操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-08-08

