以下是原生和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. gitlab分享项目到其它组

    1. 找到以下页面(管理员权限),随便点入一个项目 2. 点击edit编辑 3.点击members 4. 查看是否分享成功

  2. homework week 1

    第一周的作业 首先来完成第二个作业, 编写登录接口, 因为视频上并没有相关的教程, 就在网上搜了一下读写文件的语句, 粗略了解. f1 = open("data.txt",&quo ...

  3. webstorm+nodejs环境中安装淘宝镜像

    用过nodejs的人都知道,从node的官方模板库下载依赖包的时候,经常会遇到“假死”(页面静止不动)的状态,这种速度简直要逼死焦急地等待下班的人.还好咱们万能的淘宝提供了淘宝镜像这么一个不要更好用的 ...

  4. 【codeforces 801A】Vicious Keyboard

    [题目链接]:http://codeforces.com/contest/801/problem/A [题意] 一个字符串只由VK组成; 让你修改一个字符; 使得剩下的字符串里面子串VK的个数最大; ...

  5. Master Nginx(6) - The Nginx HTTP Server

    Nginx's architecture The HTTP core module The server Logging Finding files Name resolution Client in ...

  6. EntityFramewordCore 2.2 DBFirst简单使用

    如何用EF Core连接数据库并且生成实体类? 1.通过Nuget安装依赖 Install-package Microsoft.EntityFrameworkCore Install-package ...

  7. 清北学堂模拟赛d6t5 侦探游戏

    分析:简化一下题意就是给任意两对点连一条权值为0的边,求出每次连边后最小生成树的权值和*2/(n - 1) * n. 每次求最小生成树肯定会爆炸,其实每次加边只是会对最小生成树上的一条边有影响,也就是 ...

  8. php ip伪装访问

    打算做个采集,无记录下来备用 php的curl搞定ip伪装来采集内容.以前写过一段代码采集一个数据来处理.由于数据量过大,同一ip采集.经常被限制,或者列为黑名单.   写了段代码伪装ip,原理是,客 ...

  9. Java下用Jackson进行JSON序列化和反序列化（转）

    Java下常见的Json类库有Gson.JSON-lib和Jackson等,Jackson相对来说比较高效,在项目中主要使用Jackson进行JSON和Java对象转换,下面给出一些Jackson的J ...

  10. N天学习一个Linux命令之帮助命令：man

    前言 工作中每天都在使用常用的命令和非常用的命令,忘记了用法或者参数,都会bing一下,然后如此循环.一直没有真正的系统的深入的去了解命令的用法,我决定打破它.以前看到有人,每天学习一个linux命令 ...