以下是原生和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. IE低版本和高级浏览器对文本输入事件兼容

    1 一般 使用oninput 事件可以监控文本输入事实触发 2 兼容需要使用onpropertychange . 3 兼容写法   var evenInput=DOM元素.oninput || DOM ...

  2. C++实现双人枪战游戏

    //单机版枪战游戏,喜欢就拿走,把赞留下//by floatiy #include<iostream> #include<cstdio> #include<windows ...

  3. JS布尔值(Boolean)转换规则

    原文作者: louis 原文链接: http://louiszhai.github.io/2015/12/11/js.boolean/ 语法 众所周知, JavaScript有五个基本的值类型:num ...

  4. ubuntu18.04安装chrome浏览器

    前几天把系统弄崩溃了,弄了好久也没弄好,索性直接装18.04,下面是安装chrom浏览器的步骤,网络上照着16.04安装的,应该是一样的 启动终端. 输入以下命令: sudo wget http:// ...

  5. Linux下安装.bundle后缀的程序

    按照如下操作: #赋予可执行权限 sudo chmod +x XXXXX.bundle #使用root权限启动 sudo ./XXXXX.bundle

  6. spring mvc之applicationContext

    1.ApplicationContext是在package org.springframework.context下,是spring的,spring context包下的. applicationCo ...

  7. MySQL 调优 —— Using filesort

    出现这个问题的解决办法在于 MySQL 每次查询仅仅能使用一个索引, 而你的 SQL 语句 WHERE 条件和 ORDER BY 的条件不一样, 索引没建好的话. 那么 ORDER BY 就使用不到索 ...

  8. clCreateCommandQueue&#39;: was declared deprecated

    今天在配置opencl的开发环境.測试用例时,用的是intel的sdk开发包.遇到了这个问题: clCreateCommandQueue': was declared deprecated 也就是说这 ...

  9. buaa 1033 Easy Problem(三分)(简单)

    Easy Problem 时间限制:1000 ms  |  内存限制:65536 KB 描写叙述 In this problem, you're to calculate the distance b ...

  10. hihoCoder - 1079 - 离散化 （线段树 + 离散化）

    #1079 : 离散化 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描写叙述 小Hi和小Ho在回国之后,又一次过起了朝7晚5的学生生活.当然了.他们还是在一直学习着各种算法 ...