在HTML按鈕上啓用和禁用下拉單擊

Question

我目前有一個多行和多列表格，其中一列包含下拉列表，另一列包含編輯/保存按鈕。我的表中每行的下拉列表在加載時都被禁用。但是，點擊按鈕後，該行中的下拉菜單即會啓用。一旦再次點擊按鈕（這是一個保存按鈕），它們應該被禁用。

我有它的工作，但它只是在頂端行，因爲我使用getElementById。我爲包括getElementByClassName在內的所有課程嘗試過的所有內容都不適合我。

我發現了很多我想要做的事例，但他們似乎只處理一個下拉列表，而我有很多我正在處理的事情。

那麼我怎樣才能得到這個成功的工作，以便它將工作在相應的行中按下按鈕，而不僅僅是第一行？

HTML表：

的JavaScript

<table id="skuTable" cellspacing="5" class="ui-widget ui-widget-content"> 
    <thead> 
     <tr class="ui-widget-header"> 
      <th style="display: none">Product ID</th> 
      <th class="skuRow">Major Category</th> 
      <th class="skuRow">Minor Category</th> 
      <th class="skuRow">Report Code</th> 
      <th class="skuRow">SKU</th> 
      <th class="skuRow">SKU Description</th> 
      <th class="skuRow">SKU Status</th> 
      <th class="skuRow">Create Date</th> 
      <th class="skuRow">SKU Group</th> 
      <th class="skuRow">Edit</th> 
     </tr> 
    </thead> 
    <tbody> 

     <?php foreach ($dbh->query($query) as $row) {?> 

     <tr> 
      <td style="display: none" class="prod_id" id="product_id-<?php echo intval ($row['Product_ID'])?>"><?php echo $row['Product_ID']?></td> 
      <td class="major_cat" id="major_cat-<?php echo intval ($row['Major Category'])?>"><?php echo $row['Major Category']?></td> 
      <td class="minor_cat" id="minor_cat-<?php echo intval ($row['Minor Category'])?>"><?php echo $row['Minor Category']?></td> 
      <td class="rep_code" id="rep_code-<?php echo intval ($row['Product Report Code'])?>" align="center"><?php echo $row['Product Report Code']?></td> 
      <td class="sku" id="sku-<?php echo intval ($row['SKU'])?>" align="center"><?php echo $row['SKU']?></td> 
      <td class="sku_desc" id="sku_desc-<?php echo intval ($row['SKU Description'])?>"><?php echo $row['SKU Description']?></td> 
      <td class="sku_status" id="sku_status-<?php echo intval ($row['SKU Status'])?>" align="center"><?php echo $row['SKU Status']?></td> 
      <td class="create_date" id="create_date-<?php echo intval ($row['Date'])?>" align="center"><?php echo $row['Date']?></td> 
      <td class="sku_group" id="sku_group-<?php echo intval ($row['SKU Group'])?>" align="center"> 

       <div> 
       <select id="sku_group_dropdown" disabled> 
        <option 
         value="" 
         data-name="<?php echo $row ['SKU Group'];?>" 
        > 
         <?php echo $row ['SKU Group'];?> 
        </option> 
       </select> 
      </div> 

       <!--<div><?php echo $row ['SKU Group'];?></div>--> 
      </td> 
      <td><input type="button" class="edit" name="edit" value="Edit"></td> 
     </tr> 

    <?php } ?> 

    </tbody> 
</table> 

行我用它來切換從殘疾人啓用，反之亦然。這些都貼在我的JS的不同領域，但我只發佈這兩條線，因爲它們是適用於我的問題的代碼的唯一行：

document.getElementById("sku_group_dropdown").disabled=false; 
document.getElementById("sku_group_dropdown").disabled=true; 

Answer 1

請檢查該代碼

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<table id="skuTable" cellspacing="5" class="ui-widget ui-widget-content"> 
<thead> 
    <tr class="ui-widget-header"> 
     <th style="display: none">Product ID</th> 
     <th class="skuRow">Major Category</th> 
     <th class="skuRow">Minor Category</th> 
     <th class="skuRow">Report Code</th> 
     <th class="skuRow">SKU</th> 
     <th class="skuRow">SKU Description</th> 
     <th class="skuRow">SKU Status</th> 
     <th class="skuRow">Create Date</th> 
     <th class="skuRow">SKU Group</th> 
     <th class="skuRow">Edit</th> 
    </tr> 
</thead> 
<tbody> 



    <tr> 
    <td>Test1</td> 
    <td> 
     <div> 
      <select disabled class="drop-down-list"> 
       <option 
        value="" 
        data-name="asdas"> 
        Tesy1 
       </option> 
      </select> 
     </div> 


     </td> 
     <td><input type="button" class="edit" onclick="enable_value(this)" name="edit" value="Edit"></td> 
    </tr> 

<tr> 
    <td>Test2</td> 
    <td> 
     <div> 
      <select disabled class="drop-down-list"> 
       <option 
        value="" 
        data-name="asdas"> 
        Tesy2 
       </option> 
      </select> 
     </div> 


     </td> 
     <td><input type="button" class="edit" onclick="enable_value(this)" name="edit" value="Edit"></td> 
    </tr> 

</tbody> 
</table> 

和這你的功能

<script> 
    function enable_value(event){ 
     if($(event).parent().parent().find('.drop-down-list').prop("disabled")){ 
      $(event).parent().parent().find('.drop-down-list').attr('disabled', false); 
     } else { 
      $(event).parent().parent().find('.drop-down-list').attr('disabled', true); 
     } 
    } 
</script>