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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
理解javascript模块化
2016/03/28 Javascript
如何快速上手Vuex
2017/02/14 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
某公司的.net工程师面试题笔试题
2013/11/22 面试题
大学共青团员个人自我评价
2014/04/16 职场文书
医学求职信
2014/05/28 职场文书
2014年计生标语
2014/06/23 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
应用心理学专业求职信
2014/08/04 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
2014年度个人总结范文
2015/03/09 职场文书
美丽的大脚观后感
2015/06/03 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
2022年四月新番
2022/03/15 日漫