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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
Codeigniter的dom类用法实例
2015/06/26 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
jquery JSON的解析方式
2009/07/25 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
js实现键盘自动打字效果
2016/12/23 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python如何保证输入键入数字的方法
2019/08/23 Python
python修改FTP服务器上的文件名
2019/09/11 Python
wxPython实现带颜色的进度条
2019/11/19 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
农行实习自我鉴定
2013/09/22 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
初中信息技术教学计划
2015/01/22 职场文书
未婚证明范本
2015/06/15 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
关于Redis的主从复制及哨兵问题
2022/06/16 Redis