javascript - 无法获取 jquery 中的输入字段值

Question

我正在使用 foreach 循环创建一个输入字段，如下所示

<?php foreach($data as $key=>$val) { ?>
<td class="table-td-1">  
<input readonly class="form-control" name="model[]" id="typename" type="text" value="<?php echo $val['asset']; ?>">
</td>
<?php } ?>

$data 是数组

(
    [0] => Array
        (
            [asset_id] => abc-02
            [asset_name] => Freezer
        )

    [1] => Array
        (
            [asset_id] => xyz-01
            [asset_name] => Refrigerator
        )

    [2] => Array
        (
            [asset_id] => 300001
            [asset_name] => Generator
        )
)

在 JavaScript 中，我尝试使用此代码获取值，但它总是提醒输入的第一个值。

<script type="text/javascript">
 $(document).ready(function () {
           var typename = $('#typename').val();
           alert(typename);     
});
</script>

当值为“Generator”时，我必须禁用此输入字段

Answer 1

尝试:

$('[readonly].form-control').each(function(i,e) {

    console.log($(e).val());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="table-td-1">  
  <input readonly class="form-control" name="model[]" id="typename" type="text" value="1">  
  <input readonly class="form-control" name="model[]" id="typename" type="text" value="2">  
  <input readonly class="form-control" name="model[]" id="typename" type="text" value="3">  
  <input readonly class="form-control" name="model[]" id="typename" type="text" value="4"> 
  <input readonly class="form-control" name="model[]" id="typename" type="text" value="5">
</td>

1. .val() 调用一次将始终只产生一个值； .val() docs :

   Get the current value of the first element in the set of matched elements .

2. HTML id 属性应该是唯一的，请尝试这样做。

<小时/>

<?php 
   $count = 0;
   foreach($data as $key=>$val) { 
?>
    <td class="table-td-1">  
        <input readonly class="form-control" name="model[]" id="typename_<?php echo $count++; ?>" type="text" value="<?php echo $val['asset']; ?>">
    </td>

<?php } ?>

它将为每个输入生成不同的 id 属性，typename_0、typename_1、...、typename_n，例如，允许您:

$('[id^="typename_"]').each(function(i,e) {

    console.log($(e).val());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <td class="table-td-1">  
      <input readonly class="form-control" name="model[]" id="typename_0" type="text" value="1">  
      <input readonly class="form-control" name="model[]" id="typename_1" type="text" value="2">  
      <input readonly class="form-control" name="model[]" id="typename_2" type="text" value="3">  
      <input readonly class="form-control" name="model[]" id="typename_3" type="text" value="4"> 
      <input readonly class="form-control" name="model[]" id="typename_4" type="text" value="5">
    </td>

其中[id^="typename_"]是CSS attribute selector ，匹配具有以 typename_ 开头的 id 属性的所有元素。