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的复选框的选择器

1 个答案: