javascript - 将表单输入更改为仅在复制元素时读取

Question

所以我对 jQuery 非常无知，只是继承了别人的代码。非常感谢任何帮助。

我有一个表单，当他们将学生添加到表单时，会根据查询填充该表单。他们可以将任意数量的学生添加到表格中。下面是 html:

<table style="width:100%">
            <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>

这是我一直在尝试修改的 jQuery 函数:

jQuery(function($){
    var addStudent = function(data){
        var studentEl = $($('.student').get(0)).clone()
        studentEl.find('input').each(function(){
            var field = $(this).attr('name').replace('[]','')
            if ($(this).attr("name").val == '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)
    }
})

该函数为每个学生创建一组附加字段，这些字段由数据库填充以供表单处理。

我希望将“名称”的特定字段修改为只读(可以查看但不能修改，但仍可以提交)。我已经尝试了许多其他迭代，但无法获取 if 子句中的字段名称以仅使该字段只读。

提供的任何帮助都会很棒。

Answer 1

通过 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>