javascript - how to disable in another select box when the other selection box is selected in the same row using jquery -
i want disable in select box when other selection box selected (option value = 3) in same row.
there many rows in table. in each row, there has 3 select box in each column. if selected select box in first column , option value of selected box 3, want make disable second select box in same row.
i wrote code followings.
my code not working when new row added in table after click add row button. need guideline.
javascript :
<!-- add new row --> <script> $(document).ready(function() { var id = 0; // add button functionality $("#addrow").click(function() { id++; /*var master = $(this).parents("table.fancytable");*/ var master = $(this).parents("table.stdform"); // new row based on prototype row var prot = master.find(".prototype").clone(); prot.attr("class", ""); /*prot.find(".id").attr("value", id);*/ master.find(".fancytable tbody").append(prot); $(".fancytable tbody tr:nth-child(odd)").addclass("odd"); $(".fancytable tbody tr:nth-child(even)").addclass("even"); }); }); </script> <!-- change select box --> <script> $(document).ready(function() { $('.processing_code').bind('change', function(){ var data = $(this).val(); alert(data); if(data == 3){ $(this).parent('td').siblings().find(".parameter1").attr("disabled", "true"); } }); }); </script> css :
<style> .fancytable .prototype { display:none; } .odd{ background-color: #ddd; } .even{ background-color: #eee; } </style> jsp :
<input type="button" name="btn_jobtempreg_addrow" class="mediumbutton" value="add row" id="addrow" /> <div class="container_12 "> <div class="grid_job_mod height400"> <table class="fancytable" id="sortable-table" cellpadding="0" cellspacing="0" width="100%"> <thead> <tr> <th>header one</th> <th>header two</th> <th>header three</th> </tr> </thead> <tbody id="job-tbody"> <tr class="prototype"> <td> <s:select list="#{'1':'one','2':'two','3':'three' }" value="1" key="processing_code" id="processing_code" cssclass="processing_code"></s:select> </td> <td> <s:select name="parameter1" list="p_result_group" listkey="group_id" listvalue="group_name" headervalue="parameter1" style="width: 140px" id="parameter1" cssclass="parameter1"/> </td> <td> <s:select name="parameter2" list="p_result_group" listkey="group_id" listvalue="group_name" headervalue="parameter2" style="width: 140px" id="parameter2" cssclass="parameter2"/> </td> </tr> <s:iterator value="p_jobtmpent" var="tement" status="status"> <tr> <td> <s:if test="#tement.processing_code == 1"> <s:select list="#{'1':'one','2':'two','3':'three' }" value="1" key="processing_code" id="processing_code" cssclass="processing_code"></s:select> </s:if> <s:if test="#tement.processing_code == 2"> <s:select list="#{'1':'one','2':'two','3':'three' }" value="2" key="processing_code" id="processing_code" cssclass="processing_code"></s:select> </s:if> <s:if test="#tement.processing_code == 3"> <s:select list="#{'1':'one','2':'two','3':'three' }" value="3" key="processing_code" id="processing_code" cssclass="processing_code"></s:select> </s:if> </td> <td> <s:select name="parameter1" list="p_result_group" listkey="group_id" listvalue="group_name" headervalue="parameter1" style="width: 140px" id="parameter1" cssclass="parameter1"/> </td> <td> <s:select name="parameter2" list="p_result_group" listkey="group_id" listvalue="group_name" headervalue="parameter2" style="width: 140px" id="parameter2" cssclass="parameter2"/> </td> </tr> </s:iterator> </tbody> </table> </div> </div> thanks in advance.
$('.processing_code').change(function() { if($(this).val() ==3) $(this).next('select').attr("disabled", "true"); else $(this).next('select').attr("disabled", "false"); });
Comments
Post a Comment