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 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 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
FleaPHP的安全设置方法
2008/09/15 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
JS跨域总结
2012/08/30 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
详解express使用vue-router的history踩坑
2019/06/05 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
Django之form组件自动校验数据实现
2020/01/14 Python
python logging模块的使用
2020/09/07 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
大学生自我鉴定范文
2013/12/28 职场文书
运动会解说词50字
2014/01/18 职场文书
小班开学寄语
2014/04/04 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
个人总结怎么写
2015/02/26 职场文书
面试通知单大全
2015/04/20 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL