動態表與輸入字段jquery點擊編輯按鈕，啓用字段

我正在寫一個laravel應用程序，其中我有一個禁用輸入字段與edit每個按鈕表。我想單擊編輯按鈕以啓用單擊該按鈕的輸入字段。動態表與輸入字段jquery點擊編輯按鈕，啓用字段

這是我view.blade.php

@foreach($products as $product) 
       <tbody>  
        <tr> 
        <td class="col-md-2"> 
         <input type="text" name="quantity" id="1" class="form-control" 
         value="{{ $product->quantity }}" disabled="" /> 
        </td> 
        <td class="col-md-7"> 
         <input type="text" name="quantity" id="1" class="form-control" 
         value="{{ $product->description }}" disabled="" /> 
        </td> 
        <td class="col-md-3"> 
         <input type="text" name="quantity" id="1" class="form-control" 
         value="{{ $product->selling_price }}" disabled="" /> 
        </td> 
        <td class="col-md-2"> 
         <button id="edit" type="button" class="btn btn-info"> 
         Edit</button> 
        </td> 
        </tr> 
       </tbody> 
     @endforeach

這是我的jQuery腳本

 $('#edit').click(function() { 
     $(this).parent().prop('disabled', false); 
    });

來源

2017-07-03 nana

id應該對每個元素都是唯一的。請注意這一點。代替id使用類名$（this）.parent（「tr」）。find（'input'）。prop（'disabled'，false）; – JYoThI

這不起作用 – nana

對於動態生成的HTML，jQuery的點擊編輯綁定需要是不同的。爲了更清楚起見，最好使用類名而不是編輯按鈕的ID，因爲可以重用相同的類名，並且ID應該對元素唯一。

jQuery代碼應該是這樣的

$('.container').on('click', '.edit', function() { 
    $(this).parents('tr').find('input').prop('disabled', false); 
});

在這裏，你的容器元素應該已經可用，並且內容中會被動態地呈現。這將自動綁定單擊事件到所有類名的值編輯

來源

2017-07-03 12:22:11

如果我這樣做，它將啓用所有輸入字段。我正在使用PHP進行foreach循環。 – nana

@nana動態生成標記時，您仍將擁有disabled屬性。我已經創建了一個示例小提琴。看一下，看看這是你在找什麼。 [鏈接] https://jsfiddle.net/kvrahul66/gqvbtp69/4/ **請注意：**請更改輸入字段的名稱屬性。他們都和現在有相同的名字。 –

非常感謝你的工作 – nana

動態表與輸入字段jquery點擊編輯按鈕，啓用字段

回答

相關問題