将表单输入更改为在元素复制时只读

通过 jQuery 获取属性的正确方法只是$(this).attr("name")：

也不要使用：

var field = $(this).attr('name').replace('[]','')
            if ($(this).attr("name").val == 'name'){
                $(this).prop("readonly", true);
            }

使用已创建的变量field：

var field = $(this).attr('name').replace('[]','')
            if (field  == 'name'){
                $(this).prop("readonly", true);
            }

请参阅下面的片段：

jQuery(function($) {
  var addStudent = function(data) {
    var studentEl = $($('.student').get(0)).clone()
    studentEl.find('input').each(function() {
      var field = $(this).attr('name').replace('[]', '')
      if (field == 'name') {
        $(this).prop("readonly", true);
      }
      $(this).val(data[field] || '')
    })
    if (data.client_no != '') {
      studentEl.find('.will_update').text("Will update student information for " + data.name + '')
    }
    $($('.student').last()).after(studentEl)
  }
  $('button').click(function() {
    addStudent({
      client_no: 1,
      name: "Ralph John "
    })
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" class="student">
  <tr>
    <td colspan="2">
      <label class="control-label">Name</label>
      <input type="text" name="name[]" value="" class="required" style="width: 290px">
    </td>
    <td colspan="2">
      <label class="control-label">Email</label>
      <input type="text" name="email[]" value="" class="required">
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <label class="control-label">Address</label>
      <input type="text" name="address1[]" value="" class="required" style="width: 290px">
    </td>
    <td colspan="2">
      <label class="control-label">Address 2 <small>(optional)</small>
      </label>
      <input type="text" name="address2[]" value="">
    </td>
  </tr>
  <tr>
    <td colspan="1">
      <label class="control-label">City</label>
      <input type="text" name="city[]" value="" style="width:120px;" class="required">
    </td>
    <td>
      <label class="control-label">State/Providence</label>
      <input type="text" name="st_prov[]" value="" style="width:120px;" class="required">
    </td>
    <td>
      <label class="control-label">Postal Code</label>
      <input type="text" name="zip_pc[]" value="" style="width:60px;" class="required">
    </td>
    <td>
      <label class="control-label">Country</label>
      <input type="text" name="country[]" value="" class="required">
    </td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
  </tr>
</table>
<button>Add Student</button>

代码中的几个问题。

使用$('student').eq(0)而不是$($('.student').get(0))

你从jquery对象获取dom元素，并将其重新包装到jquery对象中。eq(index)函数返回一个 jquery 包装的元素。

您正在尝试从返回字符串的 attr("name") 获取 val 属性。你会得到未定义。

if ($(this).attr("name").val == 'name'){
   $(this).prop("readonly", true);
}

如果您尝试查找 name 属性的存在，只需执行

if ($(this).attr("name")){
   $(this).prop("readonly", true);
}

最后，你不需要用jquery对象重新包装jquery对象。

$($('.student').last())

Jquery 函数返回 jquery 对象，这意味着您可以链接调用，并且不需要重新包装它。

$('.student').last()

您可以按如下方式修改代码。假设你的表有类student这里有一个工作演示 - 小提琴。

$(function(){
    var addStudent = function(data){
        var studentEl = $('.student tr:first').clone();
        studentEl.find('input').each(function(){
            var field = $(this).attr('name').replace('[]','');
            if (field === 'name'){
                $(this).prop("readonly", true);
            }
            $(this).val(data[field] || '')
        })
        if(data.client_no !== ''){
            studentEl.find('.will_update').text("Will update student information for "+data.name+'')
        }
        $('.student').last().after(studentEl)
    }
});