Enable and Disable Dropdown on HTML Button Click

Question

I currently have a multiple row and column table with one of the columns containing dropdowns and one of the rows containing an Edit/Save button. The dropdowns in each row of my table are disabled on load. However, on the button click, that dropdown in that row is then enabled. Once the button is clicked again (which is then a save button) they should then be disabled.

I have it working, but it is only working for the top row as I am using getElementById. Everything I have tried for classes including getElementByClassName is not working for me.

I have found multiple examples of what I am trying to do, but they all seem to be dealing with just one dropdown, whereas I have many that I am dealing with.

So how can I get this to successfully work so that it will work for the corresponding row in which the button is pressed and not just the first row?

HTML Table:

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

Lines of JavaScript I use to switch from disabled to enabled and vice versa. These are posted in different areas of my JS, but am only posting these 2 lines as they are the only lines of code that apply to my question:

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

ok you want to first time disabled all drop down then when click button then want to enable it? so when you want to disable it again? — Shafiqul Islam
– Shafiqul Islam, Commented Feb 22, 2017 at 14:41
Yes, when i load the page, everything is disabled, which is what I want. Then you are correct, when I click the edit button, I want the corresponding dropdown to be enabled. Then when I click the button again (which will then be a save button), I want it be disabled again — Rataiczak24
– Rataiczak24, Commented Feb 22, 2017 at 14:43

Dulani Maheshi · Accepted Answer · 2021-09-28 13:33:07Z

2

please check this code

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

edited Sep 28, 2021 at 13:33

Dulani Maheshi

1,0882 gold badges15 silver badges35 bronze badges

answered Feb 22, 2017 at 15:01

Shafiqul Islam

5,6852 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Shafiqul Islam Over a year ago

this is demo code which just concept , you can change as you want

Rataiczak24 Over a year ago

This seems to work, however I still need it to be disabled again once I click the button again...how would would that work and with that being the case, I wouldnt be able to use an onclick attribute for the button would I?

Shafiqul Islam Over a year ago

one thing when you click save button then add one function as like above $(event).parent().parent().find('.drop-down-list').attr('disabled', true);

Rataiczak24 Over a year ago

Okay, that makes sense but how would that work since its just one button? It is an edit/save button in one

Shafiqul Islam Over a year ago

ok you want that same button first click enable it then again click disable it?

|

Collectives™ on Stack Overflow

Enable and Disable Dropdown on HTML Button Click

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related