以下是原生和jquery
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#tab{
width: 300px;
margin: 30px auto;
}
.tab-nav{
display: flex;
}
.tab-nav a{
flex: ;
line-height: 40px;
border: 1px solid #;
text-align: center;
text-decoration: none;
color: #;}
.tab-nav a.current{
color: #fff;
background: #;
}
.content{
display: none;
width: %;
height: 300px;
color: black;
box-sizing: border-box;
padding: 10px;}
.content.current{
display: block;
}
/*.content1{ background: #6fcaff; }*/
/*.content2{ background: #ffb3e6;}*/
/*.content3{ background: #e0bd7f;}*/
</style> </head>
<body>
<div>
<input type='checkbox' value="苹果">苹果
<input type='checkbox' value="香蕉" class="banner">香蕉
<input type='checkbox' value="orange" class="orange" checked>桔子
<input type='checkbox' value="orange" class="orange" checked="checked">桔子
<input type='text' value="animal" class="dog" >dog
<input type='text' value='' class="cat" >cat
</div>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script>
document.getElementsByClassName('banner')[].checked = true
document.getElementsByClassName('dog')[].disabled = true $('.banner').attr("checked", true); //或 $('.banner').attr("checked", "checked");
$('.dog').attr("disabled", true); //或 $('.dog').attr("disabled", "disabled"); $('.banner').prop("checked", true);
$('.dog').prop("disabled", true); //jQuery获取选中的checkbox
$('input[type=checkbox]:checked'); </script>
</body>
</html>
vue下：
<div id="app">
<div slot="childSlot" @click="checkfun" >check按钮</div>
<input type="checkbox" id="checkbox" :checked="checkSymbol">
<div @click="disabledfun" >disabled按钮</div>
<input type="text" :disabled="disabledSymbol">
</div> <script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
return{
checkSymbol: false,
disabledSymbol: false
}
}，
methods:{
checkfun(){
this.checkSymbol = true
},
disabledfun(){
this.disabledSymbol = true
}
})
</script>