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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
js有关元素内容操作小结
Dec 20 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
深入理解vue中的$set
Jun 01 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
js实现无缝滚动双图切换效果
Jul 09 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 文章调用类代码
2011/08/11 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
node网页分段渲染详解
2016/09/05 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
python面试题之列表声明实例分析
2019/07/08 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
MySQL面试题目集锦
2016/04/14 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
采购部部长岗位职责
2014/02/06 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
节约电力资源的建议书
2014/03/12 职场文书
授权委托书怎么写
2014/04/03 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
歌咏比赛主持词
2015/06/29 职场文书