如何在另一個選擇框中使用jquery在同一行中選擇其他選擇框時禁用

Question

當另一個選擇框在同一行中被選中（選項值= 3）時，我想在另一個選擇框中禁用。

表中有很多行。在每一行中，每列中都有三個選擇框。如果我在第一列中選​​擇了選擇框，並且所選框的選項值是3，我想要禁用同一行中的第二個選擇框。

我寫了下面的代碼。

當我單擊添加行按鈕後，表中添加新行時，我的代碼不工作。我需要一些指導。

的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"); 

      // Get a new row based on the 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> 

在此先感謝。

Answer 1

試試這個..

<script> 
$(document).ready(function() { 
    $('.processing_code').bind('change', function(){ 
    var data = $(this).val(); 
    if(data == 3){ 
     $(this).parent('td').siblings() 
       .find(".parameter1") 
       .attr("disabled", "disabled"); 
    } 
}); 
}); 
</script> 

Answer 2

$('.processing_code').change(function() { 
    if($(this).val() ==3) 
     $(this).next('select').attr("disabled", "true"); 
    else 
     $(this).next('select').attr("disabled", "false"); 
});