Question

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

我有它工作，但它只适用于我使用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>

我使用的JavaScript行从禁用切换到启用，反之亦然。这些发布在我的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>

在HTML按钮上启用和禁用下拉列表单击

1 个答案: