nexttalljquery复选框的选择器

selector for checkbox with nextall jquery

本文关键字：选择器 复选框 nexttalljquery      更新时间：2023-09-26

使用下面的代码。。。

$("table#flooring tr")
.find('td:eq('+checkbox+') input[type="checkbox"]')
.prop('disabled', true);

这就是我如何根据变量checkbox中的td禁用复选框，因为索引是动态的，取决于用户输入。如果我在当前尝试后将其更改为全选复选框，它会是什么样子

$("table#flooring tr")
.find('td:eq('+checkbox+') input[type="checkbox"]')
.nextAll()
.prop('disabled', true);

但它并没有禁用复选框

任何想法都值得赞赏。标记如下：

<table id="flooring">
    <tr>
        <td>
            <strong>
                <p>Flooring</p>
            </strong>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <hr/>
        </td>
        <td>
            <span>1st Floor</span>
        </td>
        <td>
            <span>2nd Floor</span>
        </td>
        <td>
            <span>3rd Floor</span>
        </td>
        <td>
            <span>4th Floor</span>
        </td>
    </tr>
    <tr>
        <td>
            <span>Reinforced Concrete</span>
        </td>
        <td>
            <input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="loor3rd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />
        </td>
    </tr>
    <tr>
        <td>
            <span>Plain Cement</span>
        </td>
        <td>
            <input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor3rd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />
        </td>
    </tr>
    <tr>
        <td>
            <span>Marble</span>
        </td>
        <td>
            <input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor3rd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />
        </td>
    </tr>
    <tr>
        <td>
            <span>Wood</span>
        </td>
        <td>
            <input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor3rd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />
        </td>
    </tr>
    <tr>
        <td>
            <span>Tiles</span>
        </td>
        <td>
            <input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor3rd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />
        </td>
    </tr>
</table>

您可以尝试类似的东西

var floor = +this.value; //where floor is the number of floors
var $chcks = $('#flooring input[type="checkbox"]');
if (floor) {
    var $enabled = $('#flooring tr').find('td:lt(' + (floor + 1) + ')').find(':checkbox').prop('checked', true).prop('disabled', false);
    $chcks.not($enabled).prop('checked', false).prop('disabled', true);
}

演示：Fiddle

相关文章：