SinhaengHhjian 2015-07-31
在网页中进行操作的时候,一个常规动作是在表单中点击按钮,但是经常会出现点了按钮以后没有反应,这个时候,
用户通常会连点几次,这个可能破坏你原来的预想,例如会导致多次提交。
通过将按钮设置为不可用可以防止这类事情发生,也可以让客户知道已经成功点击了。下面是js和jquery的设置方式:
应用背景
当用户需要某项功能时要填写一些表单信息,在填写完成并提交后,该部分信息是不允许再次修改的。表单包含TextBox、DropDownList、CheckBox等控件。
需求实现
第一种方案,绑定用户填写的数据时,设置控件的Enable属性为False。如果页面的表单数较少时可采用这样的方法,但是如果在表单较多的情况下则并不是更好的方法。
第二种方案,使用Foreach访问页面控件,判断类型如果是TextBox、DropDownList、CheckBox等,则设置Enable=False。代码量相比第一种方案有所减少,但,仍不是最佳的。
js设置
document.getElementById("控件ID").disabled=true;不可编辑状态
document.getElementById("控件ID").disabled=false;可编辑状态
第三种方案,使用Jquery即可轻松实现。
复制代码代码如下:
$("input").attr("disabled","disabled");
//设置禁用属性
$("#takeon").attr("disabled","disabled");
//删除禁用属性,也就是元素可用
$("#takeon").removeAttr("disabled");
总结
checkbox、radio设置不可用
$(":checkbox,:radio").attr("disabled","disabled");
or$(":checkbox,:radio").attr("disabled",true);
要实现同样的功能有很多种方法,如何在特定场景中能找到更快捷更适合的那一种,这才是我们所想的。
jquery设置
由于jquery是基于js,所以按照上面的做法,应该是给元素设置或者移除disabled属性即可。
设置为不可用:
$("#input").attr("disabled",true);
$("#input").attr("disabled","disabled");
设置为不可用:
$("#input").attr("disabled",false);//
$("#input").removeAttr("disabled");//移除属性
$("#input").attr("disabled","");//相当于移除属性