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 相关文章推荐
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
vue组件添加事件@click.native操作
Oct 30 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
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实现利用phpexcel导出数据
2013/08/24 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
javascript运动详解
2015/07/06 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
javascript基础知识
2016/06/07 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python绘制双柱形图代码实例
2017/12/14 Python
python实现Floyd算法
2018/01/03 Python
django fernet fields字段加密实践详解
2019/08/12 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
毕业生的自我评价分享
2013/12/18 职场文书
元旦晚会策划方案
2014/02/18 职场文书
统计系教授推荐信
2014/02/28 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS