Question

我有一个按钮，当按下该按钮时，它将禁用状态，直到服务器更新，以便它返回启用状态

title = "Test When Disabled"在启用或禁用按钮时显示，我只希望在禁用按钮时显示它，我需要在其处于启用状态时将其隐藏

我想做的是仅在禁用按钮时才显示tooltip

这是我的代码

HTML

 <asp:Button ID="TestRun" data-toggle="tooltip" 
    title="Test When Disabled" type="button" Text="Run Integration" 
    runat="server" class='button' OnClientClick="RunIntegrationTest()"> 
 </asp:Button>

CSS

.button:disabled {
  border-radius: 5px;
  width: 120px;
  height: 30px;
  margin-top: 10px;
  background-color: red;
  border-color: wheat;
  color: white;
  float: right;
}

.button {
  border-radius: 5px;
  width: 120px;
  height: 30px;
  margin-top: 10px;
  background-color: gray;
  border-color: wheat;
  color: white;
  float: right;
}

.button:hover:disabled {
  border-radius: 5px;
  width: 120px;
  height: 30px;
  margin-top: 10px;
  background-color: gray;
  border-color: wheat;
  cursor: not-allowed;
  float: right;
}

.tooltip {
  position: absolute;
  display: none;
  z-index: 1;
  top: 5px;
  height: 10px;
  display: inline-block;
  padding: 10px;
  color: #000;
}

JS：

function RunIntegrationTest() {
  c = confirm("Are you sure you want to run the integration?");
  if (c) {
    $('#LoadingModal').modal('show');
    document.getElementById("TestRun").disabled = true;
    $(".TestRun").prop("disabled", false)
    $.ajax({

      url: 'Shared/_RunIntegrationMainPage',
      type: 'GET',
      success: function(res) {
        $('#LoadingModal').modal('hide');
        $('#GeneralModal').find('div.modal-title').text('Successfull');
        $('#GeneralModal').find('div.modal-body').html('<p>Run has started. Please wait a few moments and refresh the page to see new the results</p>');
        $('#GeneralModal').modal('show');
      },
      error: function() {
        $('#LoadingModal').modal('hide');
        $('#ErrorModal').modal('show');

      }
    });
  }
}

function myFunc() {
  $(document).ready(function() {
    document.getElementById("TestRun").disabled = true;
  });

}

function myFunc2() {
  $(document).ready(function() {
    document.getElementById("TestRun").disabled = false;
  });
}

C＃：

SqlCmd cmd2 = new SqlCmd("EXEC GetLastFlag ");
cmd2.SelectSql();

if (!cmd2.Eof()) {

  if (cmd2.FieldValue("settingValue").ToString() == "Y") {

    ScriptManager.RegisterStartupScript(this, this.GetType(), "", "myFunc();", true);
  } else {
    ScriptManager.RegisterStartupScript(this, this.GetType(), "", "myFunc2();", true);

  }

}

这很简单，但是我尝试了很长时间却没有成功，

我只想在悬停状态下显示文本。谢谢

Answer 1

从ASPX文件中删除title，然后在禁用该按钮时签入JavaScript。

if ($(".TestRun").prop( "disabled")){
    $(".TestRun").prop( "title", "Test When Disabled" );
} else{
    $(".TestRun").prop( "title", "" );
}

添加一些CSS也很不错：

button:disabled{
   cursor: not-allowed;
}

这是JSFiddle https://jsfiddle.net/5nckxybm/。

禁用按钮时，将鼠标悬停显示工具提示

1 个答案: