您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > Javascript(JQuery)

使用JQuery启用或禁用复选框

作者:UncleToo  来源:原创  日期:2014-03-19 8:04:57
收藏  评论:( 0 )  阅读:2434

下面是一个JQuery禁用复选框的例子,同时也具有动态添加、删除行的功能。

代码运行效果:

使用JQuery启用或禁用复选框

页面代码:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                var cnt = 2;
                $("#anc_add").click(function() {
                    $('#tbl1 tr').last().after('<tr><td class="col_1"><input type="text" name="txtbx1' + cnt + '" value="' + cnt + '"></td><td class="col_2"><input type="text" name="txtbx2' + cnt + '" value="' + cnt + '"></td><td class="col_3"><input type="text" name="txtbx3' + cnt + '" value="' + cnt + '"></td></tr>');
                    cnt++;
                });
                $("#anc_rem").click(function() {
                    $('#tbl1 tr:last-child').remove();
                    cnt--;
                });
                $('#chk_col_1').click(function() {
                    if ($('#chk_col_1').is(':checked')) {
                        $("#tbl1 .col_1 input").attr('disabled', 'disabled');
                        $('#spn_col_1').text('Enable Col');
                    } else {
                        $("#tbl1 .col_1 input").removeAttr('disabled');
                        $('#spn_col_1').text('Disable Col');
                    }
                });
                $('#chk_col_2').click(function() {
                    if ($('#chk_col_2').is(':checked')) {
                        $("#tbl1 .col_2 input").attr('disabled', 'disabled');
                        $('#spn_col_2').text('Enable Col');
                    } else {
                        $("#tbl1 .col_2 input").removeAttr('disabled');
                        $('#spn_col_2').text('Disable Col');
                    }
                });
                $('#chk_col_3').click(function() {
                    if ($('#chk_col_3').is(':checked')) {
                        $("#tbl1 .col_3 input").attr('disabled', 'disabled');
                        $('#spn_col_3').text('Enable Col');
                    } else {
                        $("#tbl1 .col_3 input").removeAttr('disabled');
                        $('#spn_col_3').text('Disable Col');
                    }
                });
            });
        </script>
    </head>
    <body>
        <a href="javascript:void(0);" id='anc_add' style="border: 1px activeborder solid;padding: 5px 7px;text-decoration: none;color: azure;background-color: cornflowerblue;">Add Row</a>
        <a href="javascript:void(0);" id='anc_rem' style="border: 1px activeborder solid;padding: 5px 7px;text-decoration: none;color: azure;background-color: cornflowerblue;">Remove Row</a>
        <div style="clear: both;margin: 10px 0;"></div>
        <table  id="tbl1" border="1">
            <tr>
                <th><input type="checkbox" id="chk_col_1" name="chk_col_1" value="1"><span id="spn_col_1">Disable Col</span></th>
                <th><input type="checkbox" id="chk_col_2" name="chk_col_2" value="1"><span id="spn_col_2">Disable Col</span></th>
                <th><input type="checkbox" id="chk_col_3" name="chk_col_3" value="1"><span id="spn_col_3">Disable Col</span></th>
            </tr>
            <tr>
                <td class="col_1"><input type="text" name="txtbx1" value="1"></td>
                <td class="col_2"><input type="text" name="txtbx1" value="1"></td>
                <td class="col_3"><input type="text" name="txtbx1" value="1"></td>
            </tr>
        </table>
    </body>
</html>




JQuery
 
禁用
 
除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/jsjquery/860.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论