zoukankan      html  css  js  c++  java
  • 【特效】复选框分行控制文本框

    也是实际项目中遇到的一个小小效果,意义不大,就是复习了一下if表达式中,复选框被选中了怎么写。

    html:

    <table class="box">

             <tr>

                 <td><input type="checkbox" class="check_1"></td>

            <td><input type="text" class="text_1" disabled></td>

        </tr>

        <tr>

                 <td><input type="checkbox" class="check_1"></td>

            <td><input type="text" class="text_1" disabled></td>

        </tr>

        <tr>

                 <td><input type="checkbox" class="check_1"></td>

            <td><input type="text" class="text_1" disabled></td>

        </tr>

    </table>

    css:

    table{ 800px; margin:100px 0 0 100px; border-collapse:collapse;}

    .box td{ height:60px; border:1px solid #ccc; padding:0 20px;}

    .text_1{ 300px; padding:0 10px; height:35px; border:1px solid #ccc; background:#fff;}

    js:

    <script>

    $(document).ready(function(){

             var check=$(".check_1");

             var text=$(".text_1");

             check.each(function(){

                       $(this).click(function(){

                                if(this.checked){

                                         $(this).parents("tr").find(".text_1").attr("disabled",false).css("border","1px solid #000");

                                         }

                                else{

                                         $(this).parents("tr").find(".text_1").attr("disabled",true).css("border","1px solid #ccc");

                                         }

                                });

                       });

    });

    </script>

    效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/2917.htm

    源码下载:http://pan.baidu.com/s/1eSz7Dzs

  • 相关阅读:
    QML用Qt.labs.settings实现保存用户设置
    周练1
    Django的Hello World
    python 笔记
    Qt Creator 搭配Git 版本控制
    Windows系统下在Git Bash中把文件内容复制到剪贴板的命令
    【转】Qt之JSON保存与读取
    Qt Creator 中文编译失败 怎么办
    Treap树 笔记
    【POJ1037】A decorative fence(DP)
  • 原文地址:https://www.cnblogs.com/xiaoxianweb/p/5704177.html
Copyright © 2011-2022 走看看