以下是原生和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. webAPP 原生APP 对比

    Web App即是一种框架型APP开发模式(HTML5 APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架 ...

  2. 洛谷——P2814 家谱

    P2814 家谱 题目背景 现代的人对于本家族血统越来越感兴趣. 题目描述 给出充足的父子关系,请你编写程序找到某个人的最早的祖先. 输入输出格式 输入格式: 输入由多行组成,首先是一系列有关父子关系 ...

  3. UVALive 3026（KMP算法）

    UVALive 3026     KMP中next[]数组的应用: 题意:给出一个字符串,问该字符串每个前缀首字母的位置和该前缀的周期. 思路:裸KMP直接上就是了: 设该字符串为str,str字符串 ...

  4. Vue源码学习（二）——生命周期

    官网对生命周期给出了一个比较完成的流程图,如下所示: 从图中我们可以看到我们的Vue创建的过程要经过以下的钩子函数: beforeCreate => created => beforeMo ...

  5. mysql登录出现1045错误

    这个问题是在window server 2012上安装mysql之后, 远程访问时出现的1045错误 我新建了一个相同的用户用于远程访问, 密码也相同, 但是还是访问不了 参照链接:https://b ...

  6. 敏捷开发系列学习总结（2）——Bug修改流程

    原则,力求各司其职,简单明了. 1. 测试人员提交bug ⑴ 标题: [ 模块名称 ] 问题描述 ⑵ 内容: 问题重现步骤的描述,最好贴上图片. 因为一图胜万言. ⑶ 指定责任人: 根据bug指定责任 ...

  7. Linux学习总结（13）——在阿里云的ubuntu上部署个人服务

    作为一个IT界的人,一般都希望有一个独立的博客,或者一部独立的机器.所以我一直在找机会,拥有一台自己可以独立控制的机器,自己想干嘛干嘛.当然这在虚拟机或者自己的PC上面也可以实现,但是这跟一台一直开着 ...

  8. ubuntu 14.04 gcc/g++版本降低

    Matlab 2014a支持的gcc/g++版本是4.7x,而ubuntu 14.04以及更高版本默认安装的版本都是4.8及以上,因此需要降低gcc/g++版本,方法如下: 1 安装 $ sudo a ...

  9. 自己写spring boot starter

    自己写spring boot starter 学习了:<spring boot实战>汪云飞著 6.5.4节 pom.xml <project xmlns="http://m ...

  10. springmvc 中开发Server Send Event

    springmvc 中开发Server Send Event 学习了:http://blog.csdn.net/leiliz/article/details/55195203 https://www. ...