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 相关文章推荐
jquery自定义滚动条插件示例分享
Feb 21 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
Node学习记录之cluster模块
May 31 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
php数据访问之增删改查操作
2016/05/09 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
Python3如何解决字符编码问题详解
2017/04/23 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
对Python中内置异常层次结构详解
2018/10/18 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
python机器学习库xgboost的使用
2020/01/20 Python
python入门之基础语法学习笔记
2020/02/08 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
《天游峰的扫路人》教学反思
2014/04/25 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android