jQuery clone（）：原始内容的单选按钮单击显示/隐藏不起作用

Question

我正在用jQuery克隆HTML代码，并在追加原始内容后将其附加到div，两个单选按钮都得到unchecked，那么我该如何解决这个问题呢？

你可以帮帮我吗 ？

jsfiddle

HTML

<div class="contentWrapper">
    <button>clone</button>
    <div class="input-group">
        <div class="content">
            <div class="content-header">
                <label for="one">one</label>
                <input type="radio" class="content-disable-enable" id="one" name="radio" checked>
            </div>
            <div class="content-body">
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="content">
            <div class="content-header">
                <label for="two">two</label>
                <input type="radio" class="content-disable-enable" id="two" name="radio">
            </div>
            <div class="content-body">
                <input type="text" class="form-control disabled">
            </div>
        </div>
    </div>
</div>

JS

$('.content-disable-enable').click(function () {
    $('.content-disable-enable').closest('.content').find('.content-body').find('.form-control').addClass('disabled');
    $(this).closest('.content').find('.content-body').find('.form-control').removeClass('disabled');
});

$('button').click(function () {
    var inputFroupClone = $('.input-group:first-of-type').clone();
    $('.contentWrapper').append(inputFroupClone);
});

Answer 1

您的代码中有许多错过的内容。简单地做克隆将打破单选按钮功能。因为克隆它时单选按钮将具有相同的名称。此外，如果你想要深度克隆，你需要有相同的点击事件，那么你必须像clone(true)一样真实。克隆后，您必须更改单选按钮的名称。这样它就不会影响其他单选按钮的功能。

在第二部分中，您将使用公共css类名禁用备用文本框。这也会影响克隆文本框。你也必须改变这种逻辑。看看我的代码，我已按照上述方案完成了更改。

  var count = 1;
  $('.content-disable-enable').click(function () {
       $(this).closest('.input-group').find('.content').find('.content-body').find('.form-control').addClass('disabled');
       $(this).closest('.content').find('.content-body').find('.form-control').removeClass('disabled');
  });

  $('button').click(function () {
     count = count + 1;
     var inputFroupClone = $('.input-group:first-of-type').clone(true);
     finalClone = inputFroupClone.find('input[type=radio]').attr('name','test'+count).find('input[type=text]').attr('name','test'+count);
     $('.contentWrapper').append(inputFroupClone);
  });

DEMO