JavaScript禁用checkbox与select的代码学习

发布时间:2020-04-08编辑:脚本学堂
本文介绍下,用javascript实现的禁用checkbox与select的代码,有需要的朋友,不妨参考下。

两种禁用checkbox的方法:
 

复制代码 代码示例:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type ="text/javascript">
function x(){
 // document.all.cb1.disabled = true;// 方法一
 document.getElementsByName("cb1")[0].disabled = true;//方法二
 }
</script>
<title>JavaScript禁用checkbox-www.jb200.com</title>
</head>
<body onload = "x()">
<input name ="cb1" type = "checkbox">
</body>
</html>

把方法一修改为:
 

document.all.cb1[0].disabled = true;//方法一更改

报错:找不到属性disabled的js

把方法二修改为:
 

document.getElementsByName("cb1").disabled = true;//方法二更改


checkbox不会被禁用。

方法一与方法二都不做任何的更改,再加入一个同样的input标签如下:
 

<input name ="cb1" type = "checkbox">

此时方法一不起作用,方法二正常。
把方法一更换为方法一的更改,就可以了。

说明:
无论以上代码中input标签的个数有多少,document对象的getElementsByName()方法返回的都是标签对象组成的数组,只有通过数组的下标才能取到该标签对象。
方法一种的cb1对象在只有一个时不会构成数组,在确定cb1只有一个的情况下,访问一定不能应用数组的形式,否则取不到该对象,只有在含有多个cb1对象的情况下才能通过数组的形式访问。

你理解了吗?不理解的话,把上面的示例,自己执行一次,根据错误,参照上面的方法修改,然后执行,多操作几次,对于js禁用checkbox的个中原理,你就明白了。

附,jquery 禁用所有select标签的值
代码如下:
 

$("#changeupdate input").attr("disabled","disabled");
$("#changeupdate select option").attr("disabled","disabled");

$("#Auditingmodify").bind("click",function(){
$("#changeupdate input").attr("disabled","");
$("#changeupdate select option").attr("disabled","");
 

选择select,然后选择其所有子项option,禁用之即可。