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 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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中url函数介绍及使用示例
2014/02/13 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
详解python的变量缓存机制
2021/01/24 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
成龙霸王洗发水广告词
2014/03/14 职场文书
《云房子》教学反思
2014/04/20 职场文书
调研座谈会发言材料
2014/08/23 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
阿凡达观后感
2015/06/10 职场文书
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
Java 数组的使用
2022/05/11 Java/Android