Question

我有一组动态行，每行都有一个下拉列表和复选框，如果选中了所有复选框，则需要更改该行的各个下拉列值。

目前，只有选中所有行中的所有复选框，我才能使其正常工作。

如何选择它所属的复选框时，只有一行的下拉列表会被更改？

我设置了这个小提琴，标记了现在有效的方法。谢谢你的帮助！

<!--First row eventRegistrations[1]-->
<select class="regSelect" name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect">
    <option value="1">Pending</option>
    <option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
<input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14 <br>

<!--There could be multiple dynamic rows whose input names increment like eventRegistrations[i]-->

<!--Next dynamic row eventRegistrations[2]-->    
<select class="regSelect" name="eventRegistrations[2].eventRegistrationStatusTypeID" id="registrationStatusSelect">
    <option value="1">Pending</option>
    <option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[1].attendanceDate" value="1">10/23/14
<input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[2].attendanceDate" value="2">10/24/14

//Change dropdown to Attended when all of checkbox group is selected
//Currently only works when all 4 checkboxes are selected, not the 2 in each group/row
$('.regChecked:checked').length == $('.regChecked').length
$(".regChecked").change(function () {
    if ($('.regChecked:checked').length == $('.regChecked').length) {
        $('.regSelect').val('2');
    }
});

Answer 1

您需要为行添加包装器，例如section或div，并且在更改时，您只能遍历父项子集合。

Tyr this：http://jsfiddle.net/uyv3mk7b/3/

<强> HTML

<!--First row eventRegistrations[1]-->
<section>
    <select class="regSelect" name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect1">
        <option value="1">Pending</option>
        <option value="2">Attended</option>
    </select>
    <input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
    <input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14 <br>
</section>
<!--There could be multiple dynamic rows whose input names increment like eventRegistrations[i]-->

<!--Next dynamic row eventRegistrations[2]-->    
<section>

    <select class="regSelect" name="eventRegistrations[2].eventRegistrationStatusTypeID" id="registrationStatusSelect2">
        <option value="1">Pending</option>
        <option value="2">Attended</option>
    </select>
    <input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[1].attendanceDate" value="1">10/23/14
    <input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[2].attendanceDate" value="2">10/24/14
</section>

<强>的jQuery

//Change dropdown to Attended when all of checkbox group is selected
$(".regChecked").change(function() {
    var checks = $(this).parent().find('.regChecked');
    var allChecked = true;
    $.each(checks, function(idx, value) {
        if (!$(this).is(':checked')) {
            allChecked = false;
        }
    });
    if (allChecked) {
        $(this).parent().find('.regSelect').val(2);
    } else {
        $(this).parent().find('.regSelect').val(1);
    }
});

//When dropdown value is Attended, select all in checkbox group
$("select").change(function() {
    if ($(this).val() === '2') {
        $(this).parent().find('.regChecked').prop('checked', true);
    }
});

Answer 2

您可以为每个组添加某种标识符，例如

<select class="regSelect group-select-1" name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect">
    <option value="1">Pending</option>
    <option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked group-1" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
<input type="checkbox" class="regChecked group-1" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14 <br>

然后使用此标识符进行操作

 $(".group-1").change(function () {
    if ($('.group-1:checked').length == $('.group-1').length) {
        $('.group-select-1').val('2');
    }
 });

Fiddle

UPD 在其他情况下添加fiddle，向Roberto Linares添加。

P.S。 ID必须是唯一的

jQuery在复选框更改时设置下拉值

2 个答案: