easyUI 单选按钮回显与隐藏

最新推荐文章于 2022-04-30 04:59:01 发布

原创最新推荐文章于 2022-04-30 04:59:01 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#radio

easyUI 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript实现的检验结果与合格证号联动显示的功能。当检验结果显示为合格时，合格证号变为必填项并显示；反之则隐藏合格证号且不必填写。通过简单的前端代码实现了输入字段的有效性和可见性的动态调整。

[color=red]检查结果为合格时，显示合格证号，并且为必填，否则就隐藏合格证号，并且不必填[/color]

<tr>
<th width="15%">检验结果</th>
<td width="35%">
<span class="radioSpan">
<input type="radio" name="deteresult" value="01" checked="checked" onclick="checkIsMin(this.value)">合格</input>
<input type="radio" name="deteresult" value="02" onclick="checkIsMin(this.value)">不合格</input>
</span>
</td>
<th width="15%" class="jyhgzh">检验合格证号</th>
<td class="jyhgzh">
<input type="text" value="${model.detecertificate}" name="detecertificate" id="detecertificate" class="easyui-textbox" required="true" data-options="validType:length[0,50]"/>
</td>
</tr>

[color=red]//检验结果改变加载事件[/color]
$("input[name='deteresult']").each(function(){
if('${model.deteresult}'==$(this).val()){
$(this).prop("checked",true);
if($(this).val()=='02'){
$('.jyhgzh').attr("style","display:none");
$("#detecertificate").textbox({ required:false });
}
}
});

[color=red]//检查是否合格，不合格就隐藏合格证号[/color]
function checkIsMin(value){
if(value=="01"){
$(".jyhgzh").removeAttr("style");
$("#detecertificate").textbox({ required:true });
}
if(value=="02"){

$('.jyhgzh').attr("style","display:none");
$("#detecertificate").textbox({ required:false });

}
}