zoukankan      html  css  js  c++  java
  • checked、disabled在原生、jquery、vue下不同写法

         

     以下是原生和jquery

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            #tab{
                       300px;
                      margin: 30px auto;
                     }
            .tab-nav{
                      display: flex;
                     }
            .tab-nav a{
                flex: 1;
                line-height: 40px;
                border: 1px solid #000;
                text-align: center;
                text-decoration: none;
                color: #000;}
            .tab-nav a.current{
                color: #fff;
                background: #000;
            }
            .content{
                display: none;
                 100%;
                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')[0].checked = true
        document.getElementsByClassName('dog')[0].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>
  • 相关阅读:
    二级域名共享主站cookies登陆,整合asp
    AS3事件类型 (as3开发技术大全读书笔记)
    如何通过AS3加载外部SWF文件,调用外部文件文档类的方法?
    C#导出Excel总结
    2010年2月编程语言排行榜,ObjectiveC势头强劲
    Flex组件开发总结(aierong原创技术随笔)
    积少成多 Flash(ActionScript 3.0 & Flex 3.0) 系列文章索引
    C#导出Excel的函数(可根据实际需要进行相应修改)
    基于FMS的在线录制例子
    处理外部信息(xml,html,js,shareObject)
  • 原文地址:https://www.cnblogs.com/renzm0318/p/10882439.html
Copyright © 2011-2022 走看看