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

如何使用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>

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

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

这样可以方便地遍历正在播放的表。

首先，无论您选择什么选择器，都需要禁用$(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/

这将完成

.next（）.prve（）文档

如果复选框是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);

在您的情况下，您有

TR>TD>复选框

要禁用同一行中的其他复选框，您应该转到列（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);

相关内容

最新更新

热门标签：