CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Rob
Rob

Reputation: 37

Enable and Disable button based on drop-down selection. - Bootstrap 3

I have a button called Update which I would like to be disabled until an option is selected from the drop-down menu.

So far I have the button disabled:

$('.btn-update').prop('disabled', true);

This is my markup for the buttons and drop-down menu:

<div class="col-md-12 tableContainer">
        <div class="panel-heading import-song-panel text-center">
            <div class="panel-title">
                <ul class="list-inline">
                    <li class="pull-right">
                        <div class="dropdownContainer btn-group text-right">
                            <button type="button" class="btn btn-primary br2 btn-md fs12 dropdown-toggle table-btn" id="table-actionbtn" data-toggle="dropdown" aria-expanded="false">
                                Select Status
                                <span class="caret ml5"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                <li>
                                    <a href="#" data-container="body" data-toggle="tooltip" title="Accept & Send" data-rowhover="editTableRow">Accept &amp; Send</a>
                                    <a href="#" data-container="body" data-toggle="tooltip" title="Accept" data-rowhover="editTableRow">Accept</a>
                                    <a href="#" data-container="body" data-toggle="tooltip" title="Reject" data-rowhover="editTableRow">Reject</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>

            </div>
        </div>
    </div>

    <div class="col-md-12 text-right">
        <div class="panel-heading import-song-panel text-right">
            <input type="button" class="btn btn-primary" id="js_CancelForm" value="Cancel" />
            <input type="submit" class="btn btn-success btn-update" id="js_SubmitForm" value="Update" />
        </div>
    </div>

Would anyone be able to show me how I can enable the button only when a status is selcted from the drop-down menu.

Upvotes: 0

Views: 1771

Answers (2)

Shwrk
Shwrk

Reputation: 173

You can add a class to the dropdown options and add a click event as well. like:

$('.optclick').click(function(){
$('.btn-update').prop('disabled', false);
e.preventDefault();

});

https://jsfiddle.net/Lz8sxmqm/10/

Upvotes: 1

Sandesh Gupta
Sandesh Gupta

Reputation: 1195

You can add an onclick event on options of dropdown.

<a href="#" data-container="body" onclick="enableButton()" data-toggle="tooltip" title="Accept & Send" data-rowhover="editTableRow">Accept &amp; Send</a>

and call an function on click event

function enableButton(){
 $('.btn-update').prop('disabled', false);
}

Upvotes: 1

Related Questions