mui radio checked label for 属性不可用——两种解决方案
阅读:252 | 作者:xysmc | 发布时间:2019-04-01 18:34:23
mui目前对单个单选框支持的比较好,但对多个单选框,似乎存在BUG。现象如下:
<div class="mui-input-row inputView">
    <label>资历:</label>
    <labe for="z1"><input name="z" id="z1" type="radio" value="1" /> 初级</label>
    <label  for="z2" ><input name="z" id="z2" type="radio" value="2"/> 高级</label>
</div>

经过测试,点击label时,并不能选中单选框。
原因是,mui.js中做了禁止的操作。
查了网上的给出的答案,总是抄来抄去,实际测试并不能起作用。

经过本分亲自测试,研究出如下两种方案:
方案1:
如果页面不需要mui.js。不用加载这个js框架即可。

方案2:
可在页面中添加监听事件,当点击label时,触发 radio的选中操作,可用的代码如下(我引用了jquery,也可以直接用原生的写法):
<div class="mui-input-row inputView">
    <label>资历:</label>
    <labe for="z1"><input name="z" id="z1" type="radio" value="1" onclick="onLabelClick()" /> 初级</label>
    <label  for="z1" ><input name="z" id="z2" type="radio" value="2" onclick="onLabelClick()"/> 高级</label>
</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
function onLabelClick(){
		var radioINput = $(this).find('input[type="radio"]');
		if(radioINput.length>0){
			var radioName = radioINput.attr('name');
			radioINput.prop('checked', true);
		}
	}
</script>
网友评论
0条评论 | 1人赞 | 0人踩
暂无回答
TA关注了 1
TA被 1 人关注