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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
破除一些网站复制、右键限制
Nov 04 Javascript
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
javascript实现控制div颜色
Jul 07 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 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连接Oracle数据库
2006/10/09 PHP
优化PHP代码的53条建议
2008/03/27 PHP
php 定界符格式引起的错误
2011/05/24 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
php实现数据库的增删改查
2017/02/26 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
python机器学习实战之树回归详解
2017/12/20 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
机器学习实战之knn算法pandas
2019/06/22 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
python爬虫容易学吗
2020/06/02 Python
给护士表扬信
2014/01/19 职场文书
《满井游记》教学反思
2014/02/26 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
社区娱乐活动方案
2014/08/21 职场文书
财务出纳岗位职责
2015/03/31 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书