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 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
fromCharCode和charCodeAt 方法
Dec 27 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
JS解析XML实例分析
Jan 30 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
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 之Section与Cookie使用总结
2012/09/14 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php调用shell的方法
2014/11/05 PHP
php jsonp单引号转义
2014/11/23 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
JS中style属性
2006/10/11 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
JS常用算法实现代码
2016/11/14 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python实现图像几何变换
2015/07/06 Python
利用aardio给python编写图形界面
2017/08/21 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python读取mysql数据绘制条形图
2020/03/25 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
2014年前台个人工作总结
2014/11/14 职场文书
新郎接新娘保证书
2015/05/08 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书