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 相关文章推荐
重定向实现代码
Nov 20 Javascript
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
JS 对象介绍
Jan 20 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
JavaScript中this详解
Sep 01 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
jquery拖动改变div大小
Jul 04 jQuery
微信小程序入门之指南针
Oct 22 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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP令牌 Token改进版
2008/07/18 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
vue实现移动端input上传视频、音频
2020/08/18 Javascript
实例讲解Python中函数的调用与定义
2016/03/14 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
python高级特性简介
2020/08/13 Python
10张动图学会python循环与递归问题
2021/02/06 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
资深地理教师自我评价
2013/09/21 职场文书
个人借条范本
2015/05/25 职场文书
领导视察通讯稿
2015/07/18 职场文书
体育教师教学随笔
2015/08/15 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
css3带你实现3D转换效果
2022/02/24 HTML / CSS