Question

我需要通过单击按钮来创建表单元素，但我还要确保单击“完全注册”，其他文件未被单击，反之亦然。如果单击任何其他人，则不会单击“完全注册”。 disableFull函数是每个复选框上的onClick。这是我的jQuery：

<script type="text/javascript">
    $(document).ready(function() {

    $("#addGuest").click(function() {

        var intId = $("#guestForm div").length + 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<label>Guest Name</label><input type=\"text\" class=\"exclusive\" id=\"guestName" + intId + "\" />&nbsp;");
        var fguestOptionFull = $("<label>Full Registration</label><input type=\"checkbox\" class=\"options\" name=\"guestOptionFull\" id=\"guestOptionFull" + intId + "\" onClick=\"disableFull('guestOptionFull" + intId + "\')\" value=\"415\">");
        var fguestOptionBreakfast = $("<label>Breakfast</label><input type=\"checkbox\" class=\"options\" id=\"guestOptionBreakfast" + intId + "\" onClick=\"disableFull('guestOptionFull" + intId + "\')\" value=\"100\">");
        var fguestOptionThursdayDinner = $("<label>Thursday Dinner</label><input type=\"checkbox\" class=\"options\" id=\"guestOptionThursdayDinner" + intId + "\" onClick=\"disableFull('guestOptionFull" + intId + "\')\" value=\"75\">");
        var fguestOptionFridayDinner = $("<label>Friday Dinner</label><input type=\"checkbox\" class=\"options\" id=\"guestOptionFridayDinner" + intId + "\" onClick=\"disableFull('guestOptionFull" + intId + "\')\" value=\"75\">");
        var fguestOptionSundayWorship = $("<label>Sunday Worship</label><input type=\"checkbox\" class=\"options\" id=\"guestOptionSundayWorship" + intId + "\" value=\"0\" onClick=\"disableFull('guestOptionFull" + intId + "\')\" />");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(fguestOptionFull);
        fieldWrapper.append(fguestOptionBreakfast);
        fieldWrapper.append(fguestOptionThursdayDinner);
        fieldWrapper.append(fguestOptionFridayDinner);
        fieldWrapper.append(fguestOptionSundayWorship);
        fieldWrapper.append(removeButton);
        $("#guestForm").append(fieldWrapper);

    });

    disableFull = function(id) {
        if ($("#" + id + ":checked").length > 0) {
            this.$("input:checkbox").each(function(x) {
                if ($(x).hasclass("options")) {
                    $(x).removeAttr('checked');
                }
            });
        }
        else {
            this.$("input:checkbox").each(function(x) {
                $(x).attr('checked', true);
            });

        }

    }
});

</script>

<span id="addGuest">Add Guest</span><div id="guestForm"></div>

Answer 1

由于您使用的是jquery，因此不需要内联onclick。您可以使用on来为动态创建的元素委派change事件。然后点击检查它是否是'guestOptionFull'选项。如果它然后遍历兄弟元素并检查/取消选中它们。

$('body').on('change', 'input:checkbox', function() {
   if ($(this).attr('name') === 'guestOptionFull' && $(this).is(':checked')) {
        $(this).siblings().not('input[name=guestOptionFull]').prop('checked', false);
   }
   else if($(this).attr('name') === 'guestOptionFull' && $(this).not(':checked')) {
        $(this).siblings().not('input[name=guestOptionFull]').prop('checked', true);
   }
});

http://jsfiddle.net/HCeBr/5/

Answer 2

试试这个：

disableFull = function(id) {
    $('#guestForm').on('click', '.fieldwrapper input:checkbox', function() {
        if ($(this).attr('id') == 'guestOptionFull1' && $(this).is(":checked")) {
            $('.fieldwrapper input:checkbox').not('#guestOptionFull1').attr('checked', false);
        } else if ($(this).attr('id') != 'guestOptionFull1' && $(this).is(":checked")) {
            $('#guestOptionFull1').attr('checked', false)
        }
    });
}

<强> jsFiddle example

使用jQuery创建复选框，并在选中其他复选框时取消选中

2 个答案: