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 window.event对象详尽解析
Feb 17 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
小程序实现搜索框
Jun 19 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 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
解析php5配置使用pdo
2013/07/03 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
js实现漫天星星效果
2017/01/19 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
python打开网页和暂停实例
2014/09/30 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python正则表达式经典入门教程
2017/05/22 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
医学专业毕业生推荐信
2013/11/14 职场文书
高中毕业生生活的自我评价
2013/12/08 职场文书
饮料业务员岗位职责
2013/12/15 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
协议书范本
2014/04/23 职场文书
小学假期安全广播稿
2014/09/28 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
员工规章制度范本
2015/08/07 职场文书
Hive常用日期格式转换语法
2022/06/25 数据库