Javascript 启用和禁用HTML下拉按钮单击

我目前有一个多行多列表，其中一列包含下拉列表，另一行包含编辑/保存按钮。我的表格中每一行的下拉列表在加载时被禁用。但是，单击按钮后，该行中的下拉列表将启用。一旦再次单击按钮（即保存按钮），则应禁用该按钮

我已经让它工作了，但是它只在最上面一行工作，因为我正在使用getElementById。我为类尝试的一切，包括getElementByClassName，对我都不起作用

我已经找到了许多我正在尝试做的事情的例子，但是它们似乎都只处理一个下拉列表，而我有很多我正在处理的

那么，我如何才能使它成功地工作，从而使它在按下按钮的对应行中工作，而不仅仅是第一行

HTML表格：

<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>

请检查这个代码

    <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>

---

确定您想第一次禁用所有下拉列表，然后单击按钮，然后想启用它吗？那么当你想再次禁用它时？是的，当我加载页面时，所有内容都被禁用，这就是我想要的。那么您是对的，当我单击编辑按钮时，我希望启用相应的下拉列表。然后，当我再次点击按钮，这将是一个保存按钮，我希望它被禁用再等几分钟这是演示代码，只是概念，你可以改变你想这似乎是工作，但我仍然需要它再次被禁用，一旦我再次点击按钮…如何工作，在这种情况下，我不能为按钮使用onclick属性，是吗？单击“保存”按钮，然后添加一个函数，如$event.parent.parent.find.下拉列表中的$attr'disabled'，true；好吧，这是有道理的，但既然它只有一个按钮，那它怎么工作呢？这是oneok中的一个编辑/保存按钮确定要使用相同的按钮先单击启用，然后再次单击禁用？

 <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>