jQuery设置单选按钮radio选中/不可用的实例代码


Posted in Javascript onJune 24, 2016

因为本 part 是“jQuery日常使用篇”,所以都是由具体需求出发,总结需要用到的知识点。代码写得未必很好,达到目标就好。那么我们先来看看这次的需求:色块模式基于彩色模式,即开了彩色才能开色块,彩色处于关闭的时候色块不可用,开启彩色时色块radio可用,关闭彩色时如果色块处于开的话需要把它关掉,大概就这样。

我们先来看看演示效果:

jQuery设置单选按钮radio选中/不可用的实例代码

我们接下来看看jQuery对单选按钮 radio 的操作。

1. 彩色处于关闭的时候色块不可用

需要两步,当页面打开时,检测如果彩色关闭的话,让色块的“开”不可用:

if($("#coloroff[checked]"))
{
//alert("Hello Nowamagic!");
$("#blockon").attr("disabled", true);
}

另外,当彩色开关切换时,即从开切换关时,让色块开不可用,同时选中色块关:

$("#coloroff").change(function(){
$("#blockon").attr("disabled", true);
$("#blockoff").attr("checked",true);
})

2. 当彩色从关切换开时,让色块可用,这很简单:

$("#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 属性来切换它们的“可用/不可用”状态。

设置 radio 不可用可以用 attr() 方法,即attr("disabled", true)。

设置 radio 的选中状态也是用 attr() 方法,attr("checked",true)。

以上所述是小编给大家介绍的jQuery设置单选按钮radio选中/不可用的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 #Javascript
jQuery模仿单选按钮选中效果
Jun 24 #Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 #Javascript
jQuery如何获取动态添加的元素
Jun 24 #Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 #Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 #Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 #Javascript
You might like
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
python把1变成01的步骤总结
2019/02/27 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
大学校庆邀请函
2014/01/11 职场文书
社会公德演讲稿
2014/05/20 职场文书
安全宣传标语口号
2014/06/06 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
工地宣传标语
2014/06/18 职场文书
大学生简短的自我评价
2014/09/12 职场文书
2015年招聘工作总结
2014/12/12 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
如何在Python中创建二叉树
2021/03/30 Python
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
用Python生成会跳舞的美女
2022/01/18 Python