js中使标记失效disabled,定时器

本文探讨了如何使用JavaScript来控制HTML中Checkbox的状态,包括使Checkbox失效和移除失效状态的方法,并介绍了一个利用定时器监控特定输入节点值的变化以执行相应操作的技术方案。

<div id="esealSubRight_cbx">
<p>
<label >签章管理:</label>
<input id="subRightWhiteList1" name="subRightWhiteList" type="checkbox" value="14-01-01-00-00-00-00-00-00-00-00" checked="checked">公章管理</input>&nbsp
<input id="subRightWhiteList2" name="subRightWhiteList" type="checkbox" value="14-01-02-00-00-00-00-00-00-00-00" checked="checked">私章管理</input><br>
<input id="subRightWhiteList3" name="subRightWhiteList" type="checkbox" value="14-01-03-00-00-00-00-00-00-00-00" checked="checked">签章申请</input>&nbsp
<input id="subRightWhiteList4" name="subRightWhiteList" type="checkbox" value="14-01-04-00-00-00-00-00-00-00-00" checked="checked">签章制作</input>
</p>
</div>

[size=medium]
发现个问题,如果将disabled属性直接加在<div id="esealSubRight_cbx">上,div中的input框是点不了了,可是后台还能接收到对应的值。
于是将disabled属性加到逐个的input框上去,这样input即点不了,后台也接收不到值了。
如何用js使input框失效?
$("#subRightWhiteList1").attr("disabled","diabled"); (使失效)
$("#subRightWhiteList1").removeAttr("disabled"); (去掉失效)
[/size]


function timer(){
var rolerights = document.getElementById('right.id').value;
if(rolerights.indexOf("14-00-00-00-00-00-00-00-00-00-00") > -1 ){
$("#subRightWhiteList1").removeAttr("disabled");
$("#subRightWhiteList2").removeAttr("disabled");
$("#subRightWhiteList3").removeAttr("disabled");
$("#subRightWhiteList4").removeAttr("disabled");
}else{
$("#subRightWhiteList1").attr("disabled","diabled");
$("#subRightWhiteList2").attr("disabled","diabled");
$("#subRightWhiteList3").attr("disabled","diabled");
$("#subRightWhiteList4").attr("disabled","diabled");
}
}
var t1 = window.setInterval("timer()",500);

function closeInterval(){
window.clearInterval(t1);
}


[size=medium]
window.setInterval("timer()",500); 此处为一个定时器,每0.5秒执行一次timer()函数。
此处为什么用到定时器?
right.id节点是这样的: <input id="right.id" name="role.rights" type="hidden" />
这个节点的值如果变化的话,我会执行以下其它的操作,刚开始想到用onchange等属性,后来发现它们不能监控js等程序赋值带来的变化,所以就想到使用定时器,每隔0.5秒查看一次这个值,如果有变化,然后做对应的其它操作。
[/size]
不同标签使`disabled`属性失效的方法有所不同: - **a标签**:可以使用JavaScript控制属性和样式来使类似“禁用”状态失效。通过将`disabled`属性设置为`false`,并将`pointer-events`属性设置为`auto`,就能恢复a标签的可点击状态。示例代码如下: ```javascript $("#NextButton").attr("disabled", false).css("pointer-events", "auto"); ``` 对应的HTML代码示例: ```html <a id="NextButton" href="#" class="btn blue" disabled="disabled" style="pointer-events: none;"></a> ``` 这里通过JavaScript代码改变了a标签的属性和样式,使其从禁用状态恢复为可点击状态[^4]。 - **elementui的input标签**:当elementui的input的`disabled`属性导致点击事件失效时,可采用`readonly`属性替换`disabled`属性,这样既能避免点击事件失效,又能通过修改样式来达到类似`disabled`的视觉效果。示例代码如下: ```html <template> <el-col :span="12" class="mb20 cursor" @click="previewText(form.patientCondition,'患者病况')"> <el-form-item label="患者病况 " prop="patientCondition"> <el-input v-model="form.patientCondition" class="readonly-input" :rows="5" type="textarea" placeholder="请输入患者病况" readonly/> </el-form-item> </el-col> </template> <style scoped lang="scss"> .readonly-input { --el-input-bg-color: rgb(245, 247, 250); } </style> ``` 在上述代码中,使用`readonly`属性替换了`disabled`属性,同时通过样式修改了输入框的背景颜色,达到了类似`disabled`的视觉效果,并且保留了点击事件[^5]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值