nextall jquery 复选框的选择器

Question

使用下面的代码...

$("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>

Answer 1

你可以试试

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

nextall jquery 复选框的选择器

selector for checkbox with nextall jquery

html

javascript

checkbox

jquery