layui radio单选限制下一个radio单选的实例


Posted in Javascript onSeptember 03, 2019

本demo的效果是单选框一有a和b两个选项按钮,单选框二有q和w两个选项按钮,

选中a,使得q不可选,w选中;选中b,使得w不可选,q选中

下面是完整的代码,需要引入layui.js,layui.css

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>layui</title>
   <meta name="renderer" content="webkit">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="stylesheet" href="https://hanlei525.github.io/layui-v2.4.3/layui/css/layui.css" rel="external nofollow"  media="all">
   <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
<form class="layui-form layui-form-pane" action="">
   <div class="layui-form-item" pane="">
     <label class="layui-form-label">单选框一</label>
     <div class="layui-input-block" >
       <input type="radio" name="单选框一" value="1" title="a" lay-filter='aaa'>
       <input type="radio" name="单选框一" value="2" title="b" lay-filter='aaa'>
     </div>
   </div>
   <div class="layui-form-item" pane="">
       <label class="layui-form-label">单选框二</label>
       <div class="layui-input-block">
         <input type="radio" name="单选框二" value="1" title="q" lay-filter='bbb'>
         <input type="radio" name="单选框二" value="2" title="w" lay-filter='bbb'>
       </div>
   </div>
     <div class="layui-form-item">
     <div class="layui-input-block">
       <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
     </div>
   </div>
</form>   
<script src='https://hanlei525.github.io/layui-v2.4.3/layui/layui.js'></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
 layui.use(['form'], function(){
  var form = layui.form,
   $=layui.jquery;
  form.on('radio(aaa)', function(data){
   // console.log(data.elem); //得到radio原始DOM对象
   // console.log(data.value); //被点击的radio的value值
   if(data.value==1){
    $('input[title=q]').removeProp('checked').prop('disabled','disabled');
    $('input[title=w]').removeProp('disabled').prop('checked','checked');
    form.render('radio')
   }else{
    $('input[title=q]').removeProp('disabled').prop('checked','checked');
    $('input[title=w]').removeProp('checked').prop('disabled','disabled');
    form.render('radio')
   }
  });
  //监听提交
  form.on('submit(demo1)', function(data){
   layer.alert(JSON.stringify(data.field), {
    title: '最终的提交信息'
   })
   return false;
  });
 });
</script>
</body>
</html>
 
<!-- ----------------------->

以上这篇layui radio单选限制下一个radio单选的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
JavaScript Array对象基本方法详解
Sep 03 #Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 #Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 #Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 #Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 #Javascript
Layui 动态禁止select下拉的例子
Sep 03 #Javascript
解决Layui中layer报错的问题
Sep 03 #Javascript
You might like
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php生成动态验证码gif图片
2015/10/19 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
javascript下string.format函数补充
2010/08/24 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
在Python中移动目录结构的方法
2016/01/31 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
求网格中的黑点分布
2013/11/06 面试题
课内比教学心得体会
2014/09/09 职场文书
2014年德育工作总结
2014/11/20 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL