单击禁用按钮时,如何显示模态?

时间:2018-07-09 03:02:53

标签: javascript html

Bellow是JS代码,它使按钮在所有输入都被填充之前都被禁用。我需要在禁用它时使它出现。

$(document).ready(function() {
    validate_dependent();
    $('#txtDependentName, #txtDependentRelation, #txtDependentBirthDate').change(validate_dependent);
});

function validate_dependent() {
    if ($('#txtDependentName').val().length > 0 && $('#txtDependentRelation').val().length > 0 && $('#txtDependentBirthDate').val().length > 0) {
        $("[name=next_dependent]").prop("disabled", false);
    } else {
        $("[name=next_dependent]").prop("disabled", true);
    }
}
<button type="button" name="next_dependent" class="btn btn-success form-control" style="width:10%; float:right;" onclick="openTab(event, 'educationTab')">Next</button>

我该怎么做。感谢您的回答。谢谢。

1 个答案:

答案 0 :(得分:0)

您可以在禁用按钮周围放置一个div,并将click事件附加到该div。示例:

$(document).ready(function() {
    //validate_dependent();
    //$('#txtDependentName, #txtDependentRelation, #txtDependentBirthDate').change(validate_dependent);
    
    $('.disabled-button-wrapper').click(function() {
      console.log('click event works');
      // add your logic here 
    });
});

function validate_dependent() {
    if ($('#txtDependentName').val().length > 0 && $('#txtDependentRelation').val().length > 0 && $('#txtDependentBirthDate').val().length > 0) {
        $("[name=next_dependent]").prop("disabled", false);
    } else {
        $("[name=next_dependent]").prop("disabled", true);
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="disabled-button-wrapper"><button type="button" name="next_dependent" class="btn btn-success form-control" style="width:10%; float:right;">Next</button></div>