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

Question

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

目前，如果我选中所有行中的所有复选框，我只能让它工作。

我怎样才能做到只有一行的下拉列表在它所属的复选框都被选中时才发生变化？

我用现在有效的标记设置了这个 fiddle 。感谢您的帮助!

http://jsfiddle.net/uyv3mk7b/

<!--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

您需要向您的行添加一个包装器，例如部分或 div，并且在更改时，您只能循环遍历父子集合。

请输入: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);
    }
});