时间戳

首页 > 解决方案 > 单击禁用按钮时，如何使模式出现？

javascript - 单击禁用按钮时，如何使模式出现？

问题描述

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>

我怎样才能做到这一点。欣赏你的回答。谢谢你。

标签： javascripthtml

解决方案

您可以在禁用按钮周围放置一个 div 并将一个单击事件附加到该 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>

推荐阅读