当前位置： 移动技术网 > IT编程>网页制作>CSS > layuiradio单选限制下一个radio单选

layuiradio单选限制下一个radio单选

2019年04月19日  | 移动技术网IT编程  | 我要评论

本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>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网