jQuery dynamic generated table rows with input fileds validation on select option

Question

I need some help in jQuery generated dynamic table rows with input fields and select option.

I want when I select option js input field id fee-2 will disable and when I select option php input field id fee-1 will disable and so on more rows inserted for different from select option on different rows. at last need some of all rows inserted by field id fee-1

example is in image

My fiddle demo is here

http://fiddle.jshell.net/softfiddle/cSbbK/2/

Thanks

Answer 1

Change your HTML to:

<td><input type="text" id="fee-1" class="fee" name="js-fee"></td>
<td><input type="text" id="fee-2" class="fee" name="php-fee"></td>

Then use this Javascript:

$("#mytable").on("change", "select", function() {
    var feeid = "#fee-" + $(this).val(); // Get ID of DIV related to selected item
    $(".fee").prop('disabled', true); // Disable all the other DIVs
    $(feeid).prop('disabled', false); // Enable the related DIV
    // Now calculate the total
    var total = 0;
    $(".fee").each(function() {
        total += parseInt($(this).text(), 10);
    });
    // And display it somewhere
    $("#totaldiv").text(total);
});