jQuery sibling ，toggleClass 影响其他 div

Question

我有一个 HTML 表单，开头如下:

<div class="row form-group">
    <label for="real_name" class="col-sm-3 control-label">Name</label>
    <div class="col-sm-5">
        <input type="text" class="form-control require_name" name="real_name" id="real_name" maxlength="100">
    </div>
    <div class="col-sm-4 btn-group">
        <div class="btn btn-default btn-private btn-warning">
            <label for="private_check">Private</label>
            <input type="radio" id="private_check" class="privacy_check" name="privacy[real_name_privacy]" value=0 checked="checked" />
        </div>
        <div class="btn btn-default btn-public">
            <label for="public_check">Public</label>
            <input type="radio" id="public_check" class="privacy_check" name="privacy[real_name_privacy]" value=1 />
        </div>
    </div>
</div>

    <div class="row form-group">
        <label for="display_name" class="col-sm-3 control-label">Artist Name</label>
        <div class="col-sm-5">
            <input type="text" class="form-control require_name" name="display_name" id="display_name" value="This guy" maxlength="100">
        </div>
        <div class="col-sm-4 btn-group">
            <div class="btn btn-default btn-private">
                <label for="private_check">Private</label>
                <input type="radio" id="private_check" class="privacy_check" name="privacy[display_name_privacy]" value=0 />
            </div>
            <div class="btn btn-default btn-public btn-warning">
                <label for="public_check">Public</label>
                <input type="radio" id="public_check" class="privacy_check" name="privacy[display_name_privacy]" value=1 checked="checked" />
            </div>
        </div>
    </div>

等等，大约有十几个。对于“btn-group”中的那些 .btn div，我有这个 jQuery:

$(".btn").click(function() {
    $(this).find("input").attr('checked', true);
    $(this).siblings().find("input").attr('checked', false);
    $(this).toggleClass('btn-warning btn-default');
    $(this).siblings().toggleClass('btn-default btn-warning');
});

当单击 .btn 时，应该切换每个 .btn 上的基础输入，并将其类从 .btn-warning 切换到 .btn-default，具体取决于是否已检查。上面的代码显然不起作用:单击第一个 .btn 将切换 .btn 中其同级的属性，但此后的每个 .btn 将切换 DOM 中其上方的每个 .btn，并且toggleClass 不执行任何操作在我单击的 .btn 组上，但单击其下面的 btn 组中的按钮也会更改上面的按钮。我尝试以困难的方式做到这一点，使用嵌套 div 检查每个按钮是否根据其底层单选按钮的状态删除或添加了必要的类，但得到了相同的结果。我认为问题出在siblings()上，但是有人知道如何在不遍历整个DOM寻找每个.btn的情况下完成这项工作吗？

Answer 1

尝试

jQuery(function ($) {
    $(".btn").click(function (e) {
        if (!$(this).find("input").is(':checked') || !$(this).is('.btn-warning')) {
            $(this).find("input").prop('checked', true);
            $(this).siblings().addBack().toggleClass('btn-default btn-warning');
        }
    });
});

演示:Fiddle

更新:

第二个问题与单选按钮的重复 ID 有关，您有多个 ID 为 private_check 的元素。和publi_check以及相应的label有for导致问题的属性集将 ids 更改为 private_check<n>和public_check<n>这样就只有一个元素具有特定的 ID。

<label for="private_check1">Private</label>
<input type="radio" id="private_check1" class="privacy_check" name="privacy[real_name_privacy]" value=0 checked="checked" />