启用和禁用按钮基于下拉选择.- 引导程序 3.



我有一个名为"更新"的按钮,我希望将其禁用,直到从下拉菜单中选择一个选项。

到目前为止,我禁用了按钮:

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

这是我对按钮和下拉菜单的标记:

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

谁能告诉我如何仅在从下拉菜单中选择状态时才启用该按钮。

您可以将类添加到下拉选项中,也可以添加单击事件。喜欢:

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

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

您可以在下拉列表选项上添加 onclick 事件。

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

并在单击事件时调用函数

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