0

当谈到 jquery 时，我是一个新手，并且对我的问题感到困惑。基本上我需要做的是当单击按钮时，该列中的所有复选框都应该被禁用，这意味着我无法选中/取消选中它。我已经搜索并发现这篇文章与我的问题最接近，但他在使用 jquery 并且只提供他的伪代码方面已经很先进了。

谁能帮我解决我的问题？下面是我的代码：

<table id="key_table" border="3">
    <thead>
        <tr>
            <th>
                Month 1<button id="1" class="lockButton">Lock</button><br>2013-01-01 to 2013-01-31<br>
                <table style="width: 250px;">
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;">1</td>
                            <td style="text-align:center;">2</td>
                            <td style="text-align:center;">3</td>
                            <td style="text-align:center;">4</td>
                        </tr>
                    </tbody>
                </table>
            </th>
            <th>
                Month 2 <button id="2" class="lockButton">Lock</button><br>2013-02-01 to 2013-02-28<br>
                <table style="width: 250px;">
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;">1</td>
                            <td style="text-align:center;">2</td>
                            <td style="text-align:center;">3</td>
                            <td style="text-align:center;">4</td>
                        </tr>
                    </tbody>
                </table>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td style="width: 250px;">
                <table>
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input checked="checked" style="width: 15px !important;" class="kw_460853mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_1" type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="width: 250px;">
                <table>
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_2" type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr class="even">
            <td style="width: 250px;">
                <table>
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_1" onclick="javascript: update_key_type(456905, 1, 1, this)" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input checked="checked" style="width: 15px !important;" class="kw_456905mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_1" type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="width: 250px;">
                <table>
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_2" type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

你也可以在这里查看JSFiddle

4

6 回答 6

1

就像是 ：

$('.lockButton').on('click', function() {
  $('#key_table > tbody > tr').find('input[type="checkbox"][class$="'+this.id+'"]')
                              .prop('disabled', true);
});

小提琴

不确定是否要切换禁用状态，但无论如何：

$('.lockButton').data('locked', false).on('click', function() {
    var cl  = this.id,
        lc  = $(this).data('locked');
    $(this).data('locked', !lc);
    $('#key_table > tbody > tr').find('input[type="checkbox"][class$="'+cl+'"]')
                                .prop('disabled', !lc);
});

小提琴

于 2013-02-26T10:17:03.527 回答
1

我叉了你的小提琴来演示解决方案。本质上，对于每个锁定按钮，您都希望：

  1. 记录操作是锁定还是解锁（我认为切换行为更有意义）；
  2. 抓住这个按钮应该影响的所有复选框（我已经详细说明了下面的代码——它有点粘）；
  3. 而且，当点击时，切换我们在#1中所做的记录......
  4. 并将其应用于disabled我们在#2 中保存的所有复选框的属性。

此代码index获取父标题的，它为我们提供了列

var column      = $(this).closest('th').index();

然后我们想立即在我们表的第一个 tbody 中获取该列的单元格（有嵌套表，所以这必须很复杂）

var $checkboxes = $('#key_table > tbody > tr > td:nth-child(' + (column + 1) + ')').find('[type=checkbox]');

演示

http://jsfiddle.net/barney/B9h2v/

于 2013-02-26T10:17:11.183 回答
1

首先不要使用内联 CSS，这很糟糕，并且会使您的代码不可读。使用类和 ID 定义样式表中的样式。

接下来添加一个班级到<td>他们来自哪个月份。按钮的 ID 告诉行号。然后添加一个名为：class='monthX'例如class=month1

然后链接这个jQuery

$(document).ready(function() {

    $("button").click(
    function () {
        var id = $(this).attr("id");
        $(".month"+id+" input[type=checkbox]").attr('disabled', 'disabled');
    }); 

});

更新的小提琴

于 2013-02-26T10:11:29.003 回答
1

你可以试试这个：

$(function() {
    $('#key_table input:checkbox').click(function() {
        if($(this).is(':checked')) {
            $(this).parent().parent().find('input:checkbox').attr('disabled',true);
            $(this).removeAttr('disabled');
        } else {
            $(this).parent().parent().find('input:checkbox').removeAttr('disabled');
        }
    });
});

希望这将满足您的需求

干杯，

特伦斯。

于 2013-02-26T10:19:53.243 回答
0

为要禁用的行添加一个公共类。这里我把 'month1','month2' 作为类名。然后禁用当前类中的输入字段。

样本

.
.
 <tr class="odd month1">  
<td><input checked="checked" type="checkbox"></td>
<td ><input type="checkbox"></td>
</tr>
.
.

 $("#1").click(function(){
    $(".month1 input").attr("disabled", true);
    })

http://jsfiddle.net/arjuncc/zXqCE/16/

于 2013-02-26T10:31:59.040 回答
0

也许这可以帮助你：

演示

$("#1").click(function(){
    $("input.kw_460853mo_1").attr("disabled", true);
    $("input.kw_456905mo_1").attr("disabled", true);
});

$("#2").click(function(){
    $("input.kw_460853mo_2").attr("disabled", true);
    $("input.kw_456905mo_2").attr("disabled", true);
});
于 2013-02-26T10:11:44.823 回答