Question

如何使用jquery禁用上一个复选框和循环中的下一个复选框？现在我禁用“this”来禁用当前复选框，但我也想禁用上一个复选框和下一个复选框。

var CurrentCoordinationTimesArray, CurrentAvailableTimesArray;

for (var i = 0; i < gAssessorEventsArray.length; i++) {
    if (gAssessorEventsArray[i].EventID == ev.EventID) {
        CurrentCoordinationTimesArray = gAssessorEventsArray[i].CoordinationTimes.split(';');
        alert(CurrentCoordinationTimesArray);

        for (var j = 0; j < CurrentCoordinationTimesArray.length; j++) {
            alert(CurrentCoordinationTimesArray[j]);
            $('#AvailableTimesTable input[type=checkbox]').each(function () {
                if ($(this).val() == (CurrentCoordinationTimesArray[j] + ';')) this.disabled = 'true';
            });
        }

        break;
    }
}

这是我的HTML：

<table width="620px" cellspacing="5" id="AvailableTimesTable" style="margin-top: 5px;border: 1px solid black; background-color: #E2EFFF;">
    <tbody>
        <tr>
            <td class="LightBoxHeadingCell" colspan="4">Available Times :</td>
        </tr>
        <tr>
            <td style="color:green;" class="AvailableTimes">
                <input type="checkbox" value="08:00 AM - 09:00 AM;" name="AvailableTimesCheckboxes" disabled="">08:00 AM - 09:00 AM</td>
            <td style="color:blue;" class="AvailableTimes">
                <input type="checkbox" value="08:30 AM - 09:30 AM;" name="AvailableTimesCheckboxes">08:30 AM - 09:30 AM</td>
            <td style="color:green;" class="AvailableTimes">
                <input type="checkbox" value="09:00 AM - 10:00 AM;" name="AvailableTimesCheckboxes">09:00 AM - 10:00 AM</td>
            <td style="color:blue;" class="AvailableTimes">
                <input type="checkbox" value="09:30 AM - 10:30 AM;" name="AvailableTimesCheckboxes">09:30 AM - 10:30 AM</td>
        </tr>
        <tr>
            <td style="color:green;" class="AvailableTimes">
                <input type="checkbox" value="10:00 AM - 11:00 AM;" name="AvailableTimesCheckboxes" disabled="">10:00 AM - 11:00 AM</td>
            <td style="color:blue;" class="AvailableTimes">
                <input type="checkbox" value="10:30 AM - 11:30 AM;" name="AvailableTimesCheckboxes">10:30 AM - 11:30 AM</td>
            <td style="color:green;" class="AvailableTimes">
                <input type="checkbox" value="11:00 AM - 12:00 PM;" name="AvailableTimesCheckboxes">11:00 AM - 12:00 PM</td>
            <td style="color:blue;" class="AvailableTimes">
                <input type="checkbox" value="11:30 AM - 12:30 PM;" name="AvailableTimesCheckboxes">11:30 AM - 12:30 PM</td>
        </tr>
        <tr>
            <td style="color:green;" class="AvailableTimes">
                <input type="checkbox" value="12:00 PM - 01:00 PM;" name="AvailableTimesCheckboxes">12:00 PM - 01:00 PM</td>
            <td style="color:blue;" class="AvailableTimes">
                <input type="checkbox" value="12:30 PM - 01:30 PM;" name="AvailableTimesCheckboxes">12:30 PM - 01:30 PM</td>
            <td style="color:green;" class="AvailableTimes">
                <input type="checkbox" value="01:00 PM - 02:00 PM;" name="AvailableTimesCheckboxes">01:00 PM - 02:00 PM</td>
            <td style="color:blue;" class="AvailableTimes">
                <input type="checkbox" value="01:30 PM - 02:30 PM;" name="AvailableTimesCheckboxes">01:30 PM - 02:30 PM</td>
        </tr>
        <tr>
            <td style="color:green;" class="AvailableTimes">
                <input type="checkbox" value="02:00 PM - 03:00 PM;" name="AvailableTimesCheckboxes">02:00 PM - 03:00 PM</td>
            <td style="color:blue;" class="AvailableTimes">
                <input type="checkbox" value="02:30 PM - 03:30 PM;" name="AvailableTimesCheckboxes">02:30 PM - 03:30 PM</td>
            <td style="color:green;" class="AvailableTimes">
                <input type="checkbox" value="03:00 PM - 04:00 PM;" name="AvailableTimesCheckboxes">03:00 PM - 04:00 PM</td>
            <td style="color:blue;" class="AvailableTimes">
                <input type="checkbox" value="03:30 PM - 04:30 PM;" name="AvailableTimesCheckboxes">03:30 PM - 04:30 PM</td>
        </tr>
        <tr>
            <td style="color:green;" class="AvailableTimes">
                <input type="checkbox" value="04:00 PM - 05:00 PM;" name="AvailableTimesCheckboxes">04:00 PM - 05:00 PM</td>
            <td style="color:blue;" class="AvailableTimes">
                <input type="checkbox" value="04:30 PM - 05:30 PM;" name="AvailableTimesCheckboxes">04:30 PM - 05:30 PM</td>
            <td style="color:green;" class="AvailableTimes">
                <input type="checkbox" value="05:00 PM - 06:00 PM;" name="AvailableTimesCheckboxes">05:00 PM - 06:00 PM</td>
            <td style="color:blue;" class="AvailableTimes">&nbsp;</td>
        </tr>
    </tbody>
</table>

Answer 1

这样就可以了解

.next() .prev()文档

如果复选框在DOM中的前一个或下一个立即关闭，则此操作将起作用。

$(this).prev('input:checkbox').attr('disable',true);
$(this).next('input:checkbox').attr('disable',true);

即使复选框不是在DOM

中的前一个或下一个立即关闭，这也会起作用

.nextAll() prevAll .eq()文档

$(this).prevAll('input:checkbox').eq(0).attr('disable',true);
$(this).nextAll('input:checkbox').eq(0).attr('disable',true);

Answer 2

在你的情况下，你有

TR＆gt; TD＆gt;复选框

要禁用同一行内的其他复选框，您应该转到列（TD），移至下一列并禁用其中的复选框。

考虑到这一点，你应该：

// Go to next/previous TD to disable its checkboxes
$(this).closest('td').prev('td').find('input:checkbox').prop('disabled',true);
$(this).closest('td').next('td').find('input:checkbox').prop('disabled',true);

如果您想获得更高的性能，请将您的父TD缓存在变量

中

var jqParentTD = $(this).closest('td');
jqParentTD.prev('td').find('input:checkbox').prop('disabled',true);
jqParentTD.next('td').find('input:checkbox').prop('disabled',true);

Answer 3

好的，如果我理解你的要求，你想根据数组值做什么

禁用当前时间复选框
禁用上次复选框（即使在另一行中）
禁用下一次复选框（即使在另一行中）

这会带来一些方便的遍历你的桌面。

首先，您需要为所选的任何选择器禁用$(this).prop("disabled",true);。这与你的this.disabled = 'true';实际上是一样的，但是对那些“其他”元素来说更容易。这是最简单的部分，这里真正的技巧是在表格的另一行中找到prevous / next元素。

示例代码对数组有一些假设，但它只获取值：

var gAssessorEventsArray = [{
    CoordinationTimes: "08:00 AM - 09:00 AM;10:00 AM - 11:00 AM",
    EventID: "fred"
}];
var ev = {};
ev.EventID = "fred";
for (var i = 0; i < gAssessorEventsArray.length; i++) {
    if (gAssessorEventsArray[i].EventID == ev.EventID) {
        CurrentCoordinationTimesArray = gAssessorEventsArray[i].CoordinationTimes.split(';');
        alert(CurrentCoordinationTimesArray);

        for (var j = 0; j < CurrentCoordinationTimesArray.length; j++) {
            alert(CurrentCoordinationTimesArray[j]);
            $('#AvailableTimesTable input[type=checkbox]').each(function () {
                if ($(this).val() == (CurrentCoordinationTimesArray[j] + ';')) {
                    this.disabled = 'true';
                    var myParentTd = $(this).parent();
                    var myParentTr = myParentTd.parent();
                    if (myParentTd.next().find('input[type="checkbox"]').length) {
                        myParentTd.next().find('input[type="checkbox"]').prop("disabled", true);
                    } else {
                        myParentTr.next().find('input[type="checkbox"]').first().prop("disabled", true);

                    }
                    if (myParentTd.prev().find('input[type="checkbox"]').length) {
                        myParentTd.prev().find('input[type="checkbox"]').prop("disabled", true);
                    } else {
                        myParentTr.prev().css('background-color','lime');
                        myParentTr.prev().find('td>input[type="checkbox"]').last().prop("disabled", true);

                    }
                }
            });
        }

        break;
    }
}

示例工作文件：http://jsfiddle.net/HbRsM/

现在只是为了表明我们可以简化这一点，我在所有输入复选框中添加了一个类，然后在其上选择，使代码和遍历更容易/更简单：这使用.each(index,element)中元素的索引通过在当前索引中添加和减去一个来查找上一个/下一个。

var gAssessorEventsArray = [{
    CoordinationTimes: "08:00 AM - 09:00 AM;10:00 AM - 11:00 AM",
    EventID: "fred"
}];
var ev = {};
ev.EventID = "fred";
for (var i = 0; i < gAssessorEventsArray.length; i++) {
    if (gAssessorEventsArray[i].EventID == ev.EventID) {
        CurrentCoordinationTimesArray = gAssessorEventsArray[i].CoordinationTimes.split(';');
        alert(CurrentCoordinationTimesArray);

        for (var j = 0; j < CurrentCoordinationTimesArray.length; j++) {
            alert(CurrentCoordinationTimesArray[j]);
            var checkboxes = $('#AvailableTimesTable').find(' input[type=checkbox].AvailableTimesCheckboxes');
            checkboxes.each(function (index, element) {
                if ($(this).val() == (CurrentCoordinationTimesArray[j] + ';')) {
                    $(element).prop("disabled",true);
                    checkboxes.eq((index > 0 ? index - 1 : index)).prop("disabled", true);
                    checkboxes.eq(index+1).prop("disabled",true);
                }
            });
        }

        break;
    }
}

更新了小提琴：http://jsfiddle.net/HbRsM/1/

如何使用jquery禁用循环中的上一个复选框和下一个复选框？

3 个答案: