0

我需要通过单击一个按钮来创建表单元素，但我还想确保是否单击了完全注册，其他的未单击，反之亦然。如果单击其他任何一个，则未单击完全注册。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>
4

2 回答 2

0

尝试这个：

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 示例。

于 2012-06-12T20:46:58.513 回答
0

由于您使用的是 jquery，因此您不需要内联 onclick。您可以只使用 on 将更改事件委托给动态创建的元素。然后你点击检查它是否是'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/

于 2012-06-12T20:33:41.860 回答