0

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

3 回答 3

0

这会成功的

.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);
于 2013-08-27T01:02:15.890 回答
0

那么在你的情况下，你有

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);
于 2013-08-27T13:51:20.597 回答
0

好的，如果我了解您的要求，并且您想要根据数组值执行的操作是

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

这为您的表带来了一些方便的遍历。

首先，您需要为$(this).prop("disabled",true);您选择的任何选择器禁用使用。这实际上与您的相同，this.disabled = 'true';但以这种方式在“其他”元素上更容易做到。这是简单的部分，这里真正的技巧是在表格的另一行中找到上一个/下一个元素。

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

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/

于 2013-08-27T14:11:33.890 回答