javascript - HTML/JQuery：禁用跨度/按钮单击（将其变灰并禁用单击）

Question

我有两个跨度在单击时显示某些信息，我不确定如何在单击另一个时将跨度变灰以看起来像一个禁用的按钮。我的代码如下。我以为我可以做类似的事情$("#toggle-odd").attr("disabled", true")，$("toggle-odd").unbind("click")但似乎都没有给我想要的结果。

$("document").ready(function(){
    $("#odd").hide();
    $("#even").hide();
});

$("#toggle-odd").click(function(){
    $("#even").hide();
    $("#odd").toggle();
});

$("#toggle-even").click(function(){
    $("#odd").hide();
    $("#even").toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<span class="btn btn-contrast" style="background-color: green" href="#" id="toggle-odd"> Show Odd Objects </span>
<span class="btn btn-contrast" style="background-color: red" href="#" id="toggle-even"> Show Even Objects </span>

<p id="odd">
  Odd
</p>

<p id="even">
 Even
</p>

标签： javascripthtmljquerybootstrap-5

Answer 1

span 标签用于显示文本。在这里你应该使用按钮。如果您想“以图形方式”禁用另一个按钮，只需添加一个类（我命名它disabled）。如果您想真正禁用它，请添加$("#your-button").attr("disabled","disabled");

在下面的例子中，我确保我们可以重新激活一个按钮，但是如果你想保持它处于非激活状态，你只需要提取第一个条件的代码。

$("document").ready(function(){
    $("#odd").hide();
    $("#even").hide();
});

$("#toggle-odd").click(function(){
    if($("#odd").css("display") == "none"){
      $("#toggle-even").attr("disabled","disabled");
      $("#toggle-even").addClass("disabled");
    }else{
      $("#toggle-even").removeAttr("disabled");
      $("#toggle-even").removeClass("disabled");
    }
    
    $("#even").hide();
    $("#odd").toggle();
});

$("#toggle-even").click(function(){
    if($("#even").css("display") == "none"){
      $("#toggle-odd").attr("disabled","disabled");
      $("#toggle-odd").addClass("disabled");
    }else{
      $("#toggle-odd").removeAttr("disabled");
      $("#toggle-odd").removeClass("disabled");
    }
    
    $("#odd").hide();
    $("#even").toggle();
});

.disabled{
background-color: grey;
}

#toggle-odd{
  background-color: green
}

#toggle-even{
  background-color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<button class="btn btn-contrast" id="toggle-odd"> Show Odd Objects </button>
<button class="btn btn-contrast" id="toggle-even"> Show Even Objects </button>

<p id="odd">
  Odd
</p>

<p id="even">
 Even
</p>