how to enable/ disable based on the select dropdown value using jquerytable in jquery asp.net c#

Question

I have read this document for better understanding to achieve my requirement I have tried this below code

using the below jquery scripts

   <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>  
               <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>  
               <link rel="Stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />  

and I have commented the above scripts and used this as per document my logic enable or disable logic is not working but as show in the document example is working...

So suggest me which concept should I use to achieve this functionality.

   <script src="https://code.jquery.com/jquery-3.5.0.js"></script>  

Dynamically adding the records to jquery table using this below code

   function AddAutoTradePagerows() {  
     
       $('#btnAdd').on("click", function (e) {  
           e.preventDefault();  
     
           //selectedinstrument: $('#AutoTradeTop_Instrument option:selected').text()   
           var paramsmbl = { entredsmbl: $('#search').val() };  
           //alert(paramsmbl.entredsmbl);  
     
           $.ajax({  
     
               type: "POST",  
               contentType: "application/json; charset=utf-8",  
               url: "AutoTrade.aspx/AutoFillData",  
               data: JSON.stringify(paramsmbl),  
               dataType: "json",   
     
               dataFilter: function (data) {  
     
                   return data;  
               },  
     
               success: function (data) {  
                  var ddlExitoptsdata = '';  
                 $.each(data.d, function (key, value) {  
     
                       if (value.Type == "exitparameters") {  
     
                           //Adding values to variable  
                           ddlExitoptsdata += "<option>" + value.TypeData + "</option>";  
                       }  
                   });  
                      
   //Calling method to fill the data  
            AddTableRowsToTable(symbol, instrument, expdate, lotsize, delta, ltpliveamount, strikeprice, optionsdata, ddlExitoptsdata, ddlSToptsdata);  
     
                     
   	},  
               error: function ajaxError(data) {  
                   alert(data.status + ' : ' + data.statusText);  
               }  
     
           });  
     
             
     
       })  
     
   }  
     
   function AddTableRowsToTable(initialsymbal, inst, exdate, lsize, delta, ltp, sprice, optionsdata, ddlExitoptsdata, ddlSToptsdata) {  
        
   //adding the dropdownlist ot variable  
       var ddlExit = "<select class='exitselect' id='ddlexitauto' onchange='ddlexitchange(this.value);'>" + ddlExitoptsdata + "</select>";  
       
           var trd = "";  
           trd += "<tr>";  
           trd += "<td>";  
           trd += ddlExit; // dynamically adding the dropdownlist to jquery table   
           trd += "</td>";  
           trd += "<td class='text-center txtdisable'><input type='text' id='EntryParameters_tgt' class='tabletwotextbox'> </td>";  
           trd += "<td class='text-center txtdisable'><input type='text' id='EntryParameters_sl' class='tabletwotextbox'> </td>";  
           trd += "<td class='text-center txtdisable'><input type='text' id='EntryParameters_tt' class='tabletwotextbox'> </td>";  
           trd += "<td class='text-center txtdisable'><input type='text' id='EntryParameters_ts' class='tabletwotextbox'> </td>";  
           trd += "</tr>";  
           $("#EntryParametersTableRightDataID tbody").append(trd);  
     
       }  
       
   }  

I have created the ddlexitchange(txt) for which option I'm selecting based on that option the values should disable/enable.

   function ddlexitchange(txt) {  
     
   //alert(txt);  
    if (txt != undefined) {  
     
              if (txt.toLowerCase() == "sq off leg") {  
               //$("td:eq(2)").prop("disabled", true); //This functionality is not working  
   //$("td:eq(2) input").prop("disabled", false); // Not working also  
     
   $("td:eq(2)").prop("disabled", true); //in this 2 place I want to pass the dynamic index value of textbox like show in image(textbox)  
     
           }  
           else {  
               $("td:eq(2)").prop("disabled", false);  
           }  
   }  

And I have tried this logic , also not working well

   var currentrow = $(this).closest("tr");  
           ////alert(currentrow);  
           currentrow.find("td:eq(0)").prop("disabled", false);  
           currentrow.find("td:eq(1)").prop("disabled", false);  

And here I'm calling this ddlexitchange(txt) function at dropdown control onchange='ddlexitchange(this.value);'. By using this function the selected value is coming properly (at each row) .

Note :- My requirement is if I change any value in the drowdownlist based on the value TextBox will disable or enable in each row separately.

Example Image is :-

Above image tell us if I select None All TextBox should be in disabled mode(not editable) and if I select any other TextBox should be enable (at each row [ and we can add n number of rows ==> this is JQueryTable]).

Suggest me how can I achieve this dynamically.

Answer 1

you don't show the code, but I assume you are using a select menu and want to disable it. use:

$( "td:eq(2) select" ).selectmenu( "disable" );

if using a vanilla select

$("td:eq(2) select").prop("disabled", false);

you question was not very clear. if you are trying to disable the inputs, then you should pass the element to the function

$(e).closest("tr").find("input").prop("disabled",true);

Answer 2

Hi @Ashok Kumar ,
First of all, I think it is possible to define a selectmenu in a table or elsewhere.

<form action="#">  
<fieldset>      
<select name="state" id="state">  
<option>able</option>  
<option selected="selected">able</option>  
</select>  
</fieldset>  
</form>  

Next, you can define the data in the table as a variable, which can be judged by getting the options for the current selectmenu in the code：

var item = $("#state").find("option:selected").text();  

Next, you can use this item to achieve the effect you want.
Of course, if you have any needs and questions, you can continue to give me a comment. I will continue to help you solve your problem.

Best regards,
Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.