asp.net - Disable Dropdown inside Grid View -

i trying disable couple of drop downs while checkbox unselected. have drop down populating @ moment, need enable/disable accordingly.

checkbox

<asp:templatefield headertext="hpv">    <itemtemplate>       <asp:checkbox id="hpvcheck" runat="server" value="feedback"/>    </itemtemplate> 

drop down list

<asp:templatefield headertext="hpv criteria">    <itemtemplate>       <asp:dropdownlist   datatextfield="description" datavaluefield="aqdcode" id="ddlhpvviolation"  runat="server" datasource="<%# hpvviolation() %>"/>       </asp:dropdownlist>    </itemtemplate>  </asp:templatefield> 

the grid

protected void gvviolationscited_onrowdatabound(object sender, gridviewroweventargs e) {     if (e.row.rowtype == datacontrolrowtype.datarow || e.row.rowtype == datacontrolrowtype.header)     {         //gridviewfunctions.findcellbydatafield(e.row, "lovrid").visible = false;         tablecell idcell = gridviewfunctions.findcellbydatafield(e.row, "id");         idcell.visible = false;          if (e.row.rowtype == datacontrolrowtype.datarow)         {             imagebutton lb = (imagebutton)e.row.findcontrol("lbshowmodaldialog");             long id = long.parse(idcell.text); 

ddl populate

public ilist<lookupitem> hpvviolation() {     return lookupdataloaderservice.instance.loadlookupdata(lookuptables.hpv_violation_code); } 

using jquery

since id of controls inside gridview modified in html output, easier work class attribute (especially jquery selectors). can set cssclass property of input elements:

<asp:templatefield headertext="hpv">     <itemtemplate>         <asp:checkbox cssclass="hpvcheck" id="hpvcheck" runat="server" ... />     </itemtemplate> </asp:templatefield> <asp:templatefield headertext="hpv criteria">     <itemtemplate>         <asp:dropdownlist cssclass="hpvviolation" id="ddlhpvviolation" runat="server" enabled="false" ... />     </itemtemplate> </asp:templatefield> 

and use these class names in event handler of checkboxes:

$('.hpvcheck').change(function () {     $(this).closest('tr').find('.hpvviolation')[0].disabled = !$(this).find('input')[0].checked; }); 

in jquery function call, checkboxes found hpvcheck class name. in event handler change event:

1. the parent table row of checkbox found
2. the dropdownlist in table row found hpvviolation class name
3. the html input element of asp.net checkbox control found
4. the disabled property of dropdownlist set according checked property of checkbox

using pure javascript

if jquery not avaible, same can done pure javascript.

the handler of onclickevent of checkbox must set:

<asp:templatefield headertext="hpv">     <itemtemplate>         <asp:checkbox id="hpvcheck" runat="server" onclick="processhpvcheck(this);"  ... />     </itemtemplate> </asp:templatefield> <asp:templatefield headertext="hpv criteria">     <itemtemplate>         <asp:dropdownlist cssclass="hpvviolation" id="ddlhpvviolation" runat="server" enabled="false" ... />     </itemtemplate> </asp:templatefield> 

and defined follows in javascript code:

function processhpvcheck(chk) {     // find table row contains checkbox     var container = chk;     while (container.tagname != 'tr') {         container = container.parentnode;     }     // find dropdownlist     var ddl = container.getelementsbyclassname('hpvviolation')[0];     // enable/disable dropdownlist according checkbox state     ddl.disabled = !chk.checked; }