【特效】复选框分行控制文本框

也是实际项目中遇到的一个小小效果，意义不大，就是复习了一下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{ width:800px; margin:100px 0 0 100px; border-collapse:collapse;}

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

.text_1{ width: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

转载于:https://www.cnblogs.com/xiaoxianweb/p/5704177.html