在動態插入的表單元素上禁用下一個表單域

Question

我知道這已被問過很多次，但這些解決方案似乎都不適用於我的情況。

我需要每行的複選框禁用下一個文本字段。每個表格行都是即時創建的（JS克隆）。只有第一行是靜態的。每個後續行，名稱和ID都會附加一個新的數字（formfield1，formfield2等），並在頁面加載後發生。添加時

HTML

<div class="add_rec_container" id="fuel_stop" style="display:block;"><!--open #fuel_stop--> 
    <p class="label">Enter Fuel Stop:</p> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="fuel_stop_table" class="fuel_data"> 
     <tbody> 
     <tr> 
      <td><select name="data_fuel_state1" id="data_fuel_state1" class="state_menu"> 
      <option value="AZ">AZ</option> 
      <option value="CA" selected="selected">CA</option> 
      <option value="NM">NM</option> 
      <option value="NV">NV</option> 
      <option value="OR">OR</option> 
      <option value="UT">UT</option> 
      </select> 
      </td> 
      <td><input type="tel" name="data_total_gal1" id="data_total_gal1" class="help total_gal_field" title="Gallons"/></td> 
      <td><input type="checkbox" name="data_yard1" id="data_yard1" class="enablePPG" value="yes" onclick="disablePPG(this);"/> Yard 
      </td> 
      <td>$ <input type="tel" name="data_price1" id="data_price1" class="help price_field" title="PPG" /></td> 
      </tr> 
     </tbody> 
    </table> 
    <a id="add_fuel_row" class="add_btn">+ State</a> 
    </div><!--close #fuel_stop--> 

    <input type="submit" name="Submit" class="send_button" value="Send"/> 
</form>​ 
</div><!--close .record_entry_container--> 

JS（沒有工作，但我覺得應該）

function disablePPG() { 
    $(this).click(function() { 
    if ($(this).is(':checked')){ 
     $(this).next('.price_field').prop('disabled', true); 
     } else { 
     $(this).next('.price_field').prop('disabled', false); 
     } 
    }); 
} 

下JS工作表單元素的第一行上，但顯然不適合多行的解決方案。

function disablePPG() { 
    $(this).click(function() { 
    if ($('#data_yard1').is(':checked')) { 
     $('#data_price1').prop('disabled', true); 
    } else { 
     $('#data_price1').prop('disabled', false);  
    } 
    }); 
} 

任何幫助非常感謝。

Answer 1

$(".enablePPG").on("click", function() 
{ 
    if($(this).is(":checked") == true) 
     $(this).parent().next().children().attr("disabled", "disabled"); 
    else 
     $(this).parent().next().children().removeAttr("disabled"); 
});