jQuery 兄弟，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 中切换其上方的每个属性，并且 toggleClass 不做任何事情在我单击的 .btn 组上，但是单击它下面的 btn 组中的一个按钮也会改变上面的那个。我已经尝试过以艰难的方式做到这一点，使用嵌套 div 检查每个按钮是否根据其底层单选按钮的状态删除或添加了必要的类，但得到了相同的结果。我认为问题出在 Brothers() 上，但是任何人都知道如何在不遍历整个 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 属性集，这是问题的原因将 id 更改为 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" />

Answer 2

这是你想要的吗？

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