css实现checked禁用

html-css022

css实现checked禁用,第1张

你说的是禁用属性disabled，控制这个是用javascript控制checkbox的disabled属性。CSS只是修改外观

<html>

<head>

<title>TEST</title>

<script>

function disableCheckBox(checkboxid,option){

var checker=document.getElementById(checkboxid)

var checkerbox=checker.parentNode

if(option==true){

checker.disabled=true

checkerbox.className="disabledchecker"//修改CSS

}else{

checker.disabled=false

checkerbox.className="enabledchecker"

}

}

</script>

<style>

.enabledchecker{ font-weight:bold}

.disabledchecker{ text-decoration:line-through}

</style>

</head>

<body>

<label><input type="checkbox" name="ctrl" onClick="disableCheckBox('checker',this.checked)" />Disable the checkbox below</label><br />

<label class="enabledchecker"><input type="checkbox" id="checker" name="checker"/>Checker</label>

</body>

</html>

首先，此类伪选择器只针对与 表单元素的单选（radio）多选（checkbox）起作用。

调试方法：

1 在页面中打开开发者工具（本例以chrome浏览器为例）,

2.选则选中的checkbox货radio.

3.在右侧的style面板中点击new Style rule 输入

input[type="checkbox"]:checked {

margin: 30px

}

即可以看到效果。

4.勾掉选中状态则margin的效果消失。