unable to enable/disable the input control in html table row

Question

I'm unable to enable/disable the FeeOtherServiceRequested input control on selection change of select control FeeServiceRequested. Only first row is working.

I have this table in .net MVC cshtml page

<tbody>
                    @foreach (DataRow row in Model.Tables["PM_Fee"].Rows)
                    {
                        <tr>
                            <td>
                                <div class="editDelInputFee FeeServiceRequestedText">
                                    @row["FeeDescription"]
                                </div>
                                <div class="saveCanInputFee FeeServiceRequestedSelectFee" style="display:none">
                                    <select class="form-control form-control-sm " style="font-size:8pt;" id="FeeServiceRequested" onchange="EnableOtherTextbox_Fee(this);">
                                        @foreach (DataRow row0 in Model.Tables["PM_Fee_ServiceRequested"].Rows)
                                        {
                                            <option value="@row0["ServiceRequested"]">@row0["ServiceRequested"]</option>
                                        }
                                    </select>
                                </div>
                            </td>
                            <td>
                                <div class="editDelInputFee FeeOtherServiceRequestedText">
                                    @row["FeeOtherDescription"]
                                </div>
                                <div class="saveCanInputFee FeeOtherServiceRequestedInputFee" style="display:none">
                                    <input type="text" class="form-control form-control-sm " style="font-size:8pt;" id="FeeOtherServiceRequested">
                                </div>
                            </td>
                             </tr>
                    }  
    </tbody>

and this javascript function

function EnableOtherTextbox_Fee(sel) {
    var tableRow = $(sel).closest('tr');
    var FeeOtherServiceRequested = tableRow.find("input[id*='FeeOtherServiceRequested']");
    var inputs = document.getElementById('FeeOtherServiceRequested');

    if (sel.value == "Other (specify)") {
        inputs.disabled = false;
    }
    else {
        inputs.disabled = true; inputs.value = '';
    }
}

you cant have identical id's on 1 web page. since your using a forloop to make the taberows and defining the same id for every row it will only pick the first 1. — JanWillem Huising
– JanWillem Huising, Commented Aug 16, 2018 at 14:00
@sak you can use dynamic id like append something unique after the id and refer it in enableOtherTextbox_Fee function — Atul
– Atul, Commented Aug 16, 2018 at 14:09

Akshay · Accepted Answer · 2018-08-21 06:55:01Z

1

Ok, I did this to solve it. Removed the ID from input controls and modified this method.

function EnableOtherTextbox_Fee(sel) {
    var tableRow = $(sel).closest('tr'); 
    var inputs = tableRow.find('.FeeOtherServiceRequestedInputFee input');      
    if (sel.value == "Other (specify)") {
        inputs.prop("disabled", false); 
    }
    else {
        inputs.prop("disabled", true); inputs.val('');
    }
}

answered Aug 21, 2018 at 6:55

Akshay

1,5022 gold badges19 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

unable to enable/disable the input control in html table row

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related