Question

当谈到jquery时，我是一个新手，我的问题越来越混乱。基本上我需要做的是当单击按钮时，该列中的所有复选框都应该被禁用，这意味着我无法检查/取消选中它。我搜索过并发现this post是与我的问题最相关的问题，但他已经在使用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

上查看

Answer 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');
    }); 

});

Updated fiddle

Answer 2

类似的东西：

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

FIDDLE

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

$('.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);
});

FIDDLE

Answer 3

我分叉你的小提琴演示解决方案。基本上，对于每个锁定按钮，您需要：

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

此代码获取父标题的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/

Answer 4

你可以尝试一下：

$(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');
        }
    });
});

希望能满足您的需求

干杯，

特伦斯。

Answer 5

也许这可以帮到你：

Demo

$("#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);
});

Answer 6

为要分配的行添加公共类。在这里，我将'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/

如何在单击按钮时禁用列中的所有复选框

6 个答案:

演示