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

  • 相关阅读:
    java怎样将一组对象传入Oracle存储过程
    android webview内容压线问题解决方法
    BS和CS对比
    【OpenCV-Python】Python Extension Packages for Windows
    hdu4462 Scaring the Birds
    tomcat安全配置之证书密码加密存储
    UVA 10714 Ants 蚂蚁 贪心+模拟 水题
    一个不喜欢读书的Javaer的读书单
    二叉树可视化--Graphviz
    [置顶] mmog游戏开发之业务篇
  • 原文地址:https://www.cnblogs.com/xiaoxianweb/p/5704177.html
Copyright © 2011-2022 走看看