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学习笔记(十七)js 优化
Feb 04 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 Javascript
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常用算法和数据结构示例(必看篇)
2017/03/15 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
JS的数组的扩展实例代码
2008/07/09 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python编程求质数实例代码
2018/01/31 Python
Python中的元组介绍
2019/01/28 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
怎样自定义一个异常类
2016/09/27 面试题
财务学生的职业生涯发展
2014/02/11 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
大学生应聘求职信
2014/05/26 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书