欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

layuiradio单选限制下一个radio单选

程序员文章站 2022-03-13 09:22:47
本demo的效果是单选框一有a和b两个选项按钮,单选框二有q和w两个选项按钮, 选中a,使得q不可选,w选中;选中b,使得w不可选,q选中 下面是完整的代码,需要引入layui...

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

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

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
















<script src="layui/layui.js" charset="utf-8"></script>
<script src='layui/jquery-3.3.1.js'></script>

<script>
layui.use(['form'], function(){
var form = layui.form

form.on('radio(aaa)', function(data){
// console.log(data.elem); //得到radio原始dom对象
// console.log(data.value); //被点击的radio的value值
if(data.value==0){
$('input[title=q]').removeattr('checked').prop('disabled','disabled');
$('input[title=w]').removeattr('disabled').prop('checked','checked');
form.render('radio')
}else{
$('input[title=q]').removeattr('disabled').prop('checked','checked');
$('input[title=w]').removeattr('checked').prop('disabled','disabled');
form.render('radio')

}
});
//监听提交
form.on('submit(demo1)', function(data){
layer.alert(json.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
});
from.on('radio')
</script>