jquery仅克隆文本而不是属性不起作用答案

【问题标题】：jquery clone only text not the attributes not workingjquery仅克隆文本而不是属性不起作用
【发布时间】：2015-11-30 17:53:19
【问题描述】：

我正在研究 jquery 克隆。我有一个 div 和三个元素。第一个元素是下拉选择，第二个是文本框，第三个是添加按钮。当用户单击添加按钮时，它完美地克隆了整个 div。但是，如果用户从下拉值中选择其他最接近的文本框需要启用，这是第一次正常工作。如果用户单击添加按钮，则文本框应处于禁用模式，因为用户尚未从下拉字段中选择另一个。

这是我的 jquery 代码

$(document).ready(function() {
  $("#btn_add").click(function() {
    $("#duplicate").clone(true).insertAfter("#duplicate");
  });
  $("#txt_select").change(function() {
    if ($(this).find("option:selected").val() == "Other") {
      $("#sel_ipt").find("#sel_ipt").removeAttr("disabled").val('');
    } else {
      $("#sel_ipt").attr("disabled", "disabled");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<div id="duplicate">
  <select id="txt_select">
    <option>Select</option>
    <option value="First">First</option>
    <option value="Second">Second</option>
    <option value="Third">Third</option>
    <option value="Other">Other</option>
  </select>
  <input type="text" disabled id="sel_ipt" />
  <input type="submit" id="btn_add" value="Add" />
</div>

请指导我

这是我的 JSBIN Link

【问题讨论】：

当我选择下拉值作为其他时，最近的文本框没有启用。您能否验证并告诉我预期的行为？

标签： javascript jquery html

【解决方案1】：

首先，既然你在复制，不要使用id，而是使用class。

我更改了您的函数并添加了 cmets，以使您了解该函数的工作原理。

$( function(){
  $(".btn_add").click(function(){
    // clone the first .duplicate
    var clone = $(".duplicate:first").clone(true);
    // find the text input, change the disabled property and empty the value
    clone.find(".sel_ipt").attr("disabled","disabled").val('');
    // insert after the last .dublicate
    clone.insertAfter(".duplicate:last");
  });
  $(".txt_select").change(function () {
    if ($(this).find("option:selected").val() == "Other") {
      // use next to find the next element with class .sel_ipt
      $(this).next(".sel_ipt").removeAttr("disabled").val('');
    } else {
      $(this).next(".sel_ipt").attr("disabled","disabled");
    }
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="duplicate">
  <select class="txt_select">
    <option>Select</option>
    <option value="First">First</option>
    <option value="Second">Second</option>
    <option value="Third">Third</option>
    <option value="Other">Other</option>
  </select>
  <input type="text" disabled class="sel_ipt" />
  <input type="submit" class="btn_add" value="Add" />
</div>

【讨论】：

全天上课。但是，由于您正在迭代未知数量的克隆，您可能会利用 :eq(0) 索引选择方法并将其放入动态递增的函数中。 function(i) class='eq(' + i + ')' + lastdupe 写得很草率，但我只是想传达这个想法。

【解决方案2】：

ID 在 DOM 中应该始终是唯一的。当您现在克隆时，您有几个不正确的#sel_ipt（以及其他）。如果你打算用这些来做一个表单发布，你可能应该跟踪你有多少输入，并在副本中添加一个数字。比如 id="sel_ipt_2" name="sel_ipt_2"。

$(document).ready(function(){

 $(".txt_select").on('change',function () {

   // Find the input in the specific row
   var input = $(this).parent().find('.sel_ipt');

   input.attr("disabled", $(this).val() != "Other").val('');

  /* 
  This is (probably) better for readability

  if ($(this).val() == "Other") {
     input.attr("disabled", $(this).val() == "Other").val('');
   } else {
     input.attr("disabled", true).val('');
   }*/

 }); 

 $("#btn_add").click(function(){

   // Get the parent row for cloning
   var row = $(this).parent();

   // Insert the row after the cloned row
   var clonedRow = row.clone(true).insertAfter(row);

   // Disable and remove value in the cloned row
   clonedRow.find('.sel_ipt').attr('disabled', true).val('');

 }); 
});

这是JS-bin link

【讨论】：