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

我們接下來(lái)看看jQuery對(duì)單選按鈕 radio 的操作。
1. 彩色處于關(guān)閉的時(shí)候色塊不可用
需要兩步,當(dāng)頁(yè)面打開(kāi)時(shí),檢測(cè)如果彩色關(guān)閉的話,讓色塊的“開(kāi)”不可用:
if($("#coloroff[checked]"))
{
//alert("Hello Nowamagic!");
$("#blockon").attr("disabled", true);
}
另外,當(dāng)彩色開(kāi)關(guān)切換時(shí),即從開(kāi)切換關(guān)時(shí),讓色塊開(kāi)不可用,同時(shí)選中色塊關(guān):
$("#coloroff").change(function(){
$("#blockon").attr("disabled", true);
$("#blockoff").attr("checked",true);
})
2. 當(dāng)彩色從關(guān)切換開(kāi)時(shí),讓色塊可用,這很簡(jiǎ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ǔ)充幾個(gè)知識(shí)點(diǎn):
checkbox, radio 這些控件都沒(méi)有readonly屬性,需要用 disabled 屬性來(lái)切換它們的“可用/不可用”狀態(tài)。
設(shè)置 radio 不可用可以用 attr() 方法,即attr("disabled", true)。
設(shè)置 radio 的選中狀態(tài)也是用 attr() 方法,attr("checked",true)。
以上所述是小編給大家介紹的jQuery設(shè)置單選按鈕radio選中/不可用的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(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)文章
JQUERY實(shí)現(xiàn)網(wǎng)頁(yè)右下角固定位置展開(kāi)關(guān)閉特效的方法
這篇文章主要介紹了JQUERY實(shí)現(xiàn)網(wǎng)頁(yè)右下角固定位置展開(kāi)關(guān)閉特效的方法,涉及jquery操作頁(yè)面元素的顯示與隱藏等相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
jquery mobile界面數(shù)據(jù)刷新的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery mobile界面數(shù)據(jù)刷新的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
JQuery實(shí)現(xiàn)動(dòng)態(tài)表格點(diǎn)擊按鈕表格增加一行
動(dòng)態(tài)表格,功能為點(diǎn)擊添加按鈕,表格增加一行并給其name屬性賦予的值,點(diǎn)擊刪除,自動(dòng)刪除這一行,具體實(shí)現(xiàn)如下2014-08-08
jQuery實(shí)現(xiàn)的鼠標(biāo)滑過(guò)彈出放大圖片特效
最近項(xiàng)目遇到個(gè)需求,需要的效果是,鼠標(biāo)移到縮略圖上會(huì)顯示該圖的大圖,并且大圖跟隨鼠標(biāo)移動(dòng);或是移動(dòng)到提示文字上,也可以顯示圖片。經(jīng)過(guò)一番思索,用下面的方法實(shí)現(xiàn)了本效果,這里分享給大家。2016-01-01
使用jquery動(dòng)態(tài)加載js文件的方法
這篇文章主要介紹了使用jquery動(dòng)態(tài)加載js文件的方法,需要的朋友可以參考下2014-12-12
jquery和css3實(shí)現(xiàn)的炫酷時(shí)尚的菜單導(dǎo)航
點(diǎn)擊列表圖表后,內(nèi)容頁(yè)面向內(nèi)移動(dòng)顯示菜單項(xiàng)。當(dāng)單擊關(guān)閉菜單按鈕時(shí),菜單項(xiàng)隱藏,內(nèi)容頁(yè)恢復(fù)原位2014-09-09

