因此,对于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子句中获取字段名称,以使该字段变为只读。

提供的任何帮助将是巨大的。

最佳答案

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

关于javascript - 将表单输入更改为仅在复制元素时读取,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35690507/

10-09 19:57
查看更多