以下是原生和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>

checked、disabled在原生、jquery、vue下不同写法的更多相关文章

  1. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  2. Jquery Mobile下设置radio控件选中

    问题: .html文件头部引入了: <script src="js/jquery.js"></script> <script src="js ...

  3. jquery IE6 下animate 动画的opacity无效

    jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~

  4. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  5. jquery 获取下拉框 某个text='xxx'的option的属性 非选中 如何获得select被选中option的value和text和......

    jquery 获取下拉框 某个text='xxx'的option的属性 非选中 5 jquery 获取下拉框 text='1'的 option 的value 属性值 我写的var t= $(" ...

  6. jquery/vue/react前端多语言国际化翻译方案指南

    ❝ 本文章共3470字,预计阅读时间5-10分钟. ❞ 国际化-前言 每个开发者能希望编写的程序可以让全世界的用户使用,它要求从产品中抽离所有地域语言,国家/地区和文化相关的元素.换种说法,「应用程序 ...

  7. jquery div 下拉框焦点事件

    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

  8. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

  9. input type=checkbox checked disabled

    input type=checkbox checked disabled 禁用无法提交!

随机推荐

  1. 解决Webpack中提示syntax 'classProperties' isn't currently enabled的错误

    当我们使用了一些JavaScript的一些新特性的时候,但是有没有在webpack.config.js里面或者是.babelrc文件中配置相关插件,就可以解决了. error:Support for ...

  2. Linux自动化之Cobbler补鞋匠安装

    cobbler介绍:   快速网络安装linux操作系统的服务,支持众多的Linux发行版:Red Hat.   Fedora.CentOS.Debian.Ubuntu和SuSE,也可以支持网络安装w ...

  3. CentOS6.8 安装python2.7，pip以及yum

    由于CentOS6.8里自带的yum所依赖的python是2.6.66版本,但是安装pip至少要求python是2.7版本,因而原有的2.6并不能卸载,又得安装新的2.7.之前安装的时候强制卸载了2. ...

  4. linux下的vi的使用方法

    vi的使用: 一般指令模式: vi打开一个文件就直接进入一般指令模式,可以进行删除.复制.粘贴.但是不可以对文件的内容进行修改. 常用命令: ctrl + f 向下移动一页 ctrl + b 向上移动 ...

  5. Python之类方法，lambda，闭包简谈

    类方法,lambda,闭包 类方法 lambda 闭包 类方法 classmethod staticmethod instancemethod 类方法 类方法,通过装饰器@classmethod来标明 ...

  6. 303. Range Sum Query - Immutable(动态规划）

    Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclusive ...

  7. Ac自动机基础题集合

    Ac_automaton的板子打熟以后发现碰到题不会做,而且还是比较纯的板子,只要改几处地方就可以,Ac_automation有许多优秀而fantasy的性质,下面粘几个题,来记录一下做题的心得. 1 ...

  8. 清北学堂模拟赛d3t6 c

    分析:比较神奇的一道题.要把树变成环肯定要先变成链,然后把链给拼接成环.接下来考虑一个脑洞大开的树形dp:设f[i][0]表示i不与父节点相连的链数,f[i][1]表示i与父节点相连的链数,先考虑怎么 ...

  9. hdu_1019_Least Common Multiple_201310290920

    Least Common Multiple Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  10. [bzoj3339]Rmq Problem||[bzoj3585]mex_线段树

    Rmq Problem bzoj-3339||mex bzoj-3585 题目大意:给定一个长度为n的数列a,多次讯问区间l,r中最小的不属于集合{$A_l,A_{l+1}...A_r$}的非负整数. ...