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

You don't need the inline onclick since you are using jquery. You can just use the on to delegate the change event on the dynamically created elements. Then you on click check if it's the 'guestOptionFull' option. If it is then loop through the sibling elements and check/uncheck them.

$('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 に答える
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 に答える