【发布时间】：2021-03-09 02:01:52
【问题描述】：
所以我想在单击按钮时禁用其他按钮
$(".btnA").click(function () {
$("#con1").show(1000, "swing");
$("#con2").attr("disabled", true);
});
如果单击 btnA，我可以禁用 #con2 吗？ 我是否需要有 if..else 条件才能执行此操作？ 是否有可能当在 jquery 中单击一个按钮时，其他按钮将被禁用？ 编辑帖子
<script>
//Show
$(".btnA").click(function () {
$("#baguio").show(1000, "swing");
$(".btnB").attr("disabled", true);
$(".btnC").attr("disabled", true);
});
$(".btnB").click(function () {
$("#SF").show(1000, "swing");
$(".btnC").attr("disabled", true);
$(".btnA").attr("disabled", true);
});
$(".btnC").click(function () {
$("#vigan").show(1000, "swing");
$(".btnB").attr("disabled", true);
$(".btnA").attr("disabled", true);
});
//Hide
$(".closeA").click(function () {
$("#baguio").hide(1000, "swing");
});
$(".closeB").click(function () {
$("#SF").hide(1000, "swing");
});
$(".closeC").click(function () {
$("#vigan").hide(1000, "swing");
});<style>
#a, #baguio {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://images.pexels.com/photos/6464126/pexels-photo-6464126.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
background-size: cover;
background-position: center;
}
#b, #SF {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url("https://dxjamgtjhgl48.cloudfront.net/uploads/article_inline_image/attachment/5bd7af80372064181b00011e/01_La_Union__zellylacuachera_.jpg");
background-size: cover;
background-position: center;
}
#c, #vigan {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.pinimg.com/originals/0e/d6/0e/0ed60ecbf77b9fffc4c8fc67fac688a5.jpg");
background-size: cover;
background-position: center;
}
.col-2 {
margin: 5px;
height: 350px;
width: 250px;
border-style: solid;
border-color: #bf9b93;
margin: 5px;
border-radius: 35px;
box-shadow: 5px 10px 18px #888888;
}
.btn {
border-color: #f27f30;
color: #fff;
backdrop-filter: blur(1px);
border-radius: 30px;
padding: 1rem 2rem;
text-transform: uppercase;
margin-top: 10px;
}
.btn:hover {
background-color: #f27f30;
}
</style><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<body>
<!--Here is the card-->
<h2 style="text-align: center; margin-bottom: 15px;">Bus Route</h2>
<strong style="text-align: center;">Be advised that due to the COVID-19 advisory we are limited to offer you our services</strong>
<h3 style="text-align: center;">Welcome to North!</h3>
<div class="row align-items-center d-flex justify-content-center">
<div class="col-2" id="a">
<h3>Cordillera </h3>
<a class="btn btnA" data-toggle="collapse" href="#baguio">Baguio City</a>
</div>
<div class="col-2" id="b">
<h3>La Union</h3>
<a class="btn btnB" data-toggle="collapse" href="#SF">San Fabian</a>
</div>
<div class="col-2" id="c">
<h3>Ilocos Norte</h3>
<an class="btn btnC" href="#vigan" data-toggle="collapse">Vigan City</a>
</div>
</div>
<!--When button was once clicked this will show-->
<div id="baguio" class="collapse here">
<h3>Welcome to Baguio City!</h3>
<h4>Where are you from?</h4>
<center>
<select class="form-select w-50" aria-label="Default select example">
<option value="1">Region 1</option>
<option value="2">Region 2</option>
<option value="3">Region 3</option>
</select>
</center>
<div class = "row align-items-center">
<div class = "col-md-6">
<table class = "table-bordered">
<tr>
<th colspan = "2"><h3>Point to Point</h3></th>
</tr>
<tr>
<td>
<h4>VIP</h4>
<ul>
<li>1,000 php per head </li>
<li>Premium Airconditioner Bus </li>
</ul>
</td>
<td>
<h4>Regular</h4>
<ul>
<li>500 php per head </li>
<li>Airconditioner Bus </li>
</ul>
</td>
</tr>
</table>
</div>
<div class = "col-md-6">
<table class = "table-bordered">
<tr>
<th colspan="2"><h3>Per Terminal</h3></th>
</tr>
<td>
<h4>VIP</h4>
<ul>
<li>1600 php per head </li>
<li>Premium Airconditioner Bus </li>
</ul>
</td>
<td>
<h4>Regular</h4>
<ul>
<li>300 php per head </li>
<li>Airconditioner Bus </li>
</ul>
</td>
</table>
</div>
</div>
<p>
<br> Present your Student/Senior/PWD ID upon paying to get the 20% discount on fare according to
<br> Republic Act No. 11314
<br> Republic Act No. 10754
<br> Republic Act No. 9994
</p>
<center> <button class = "btn closeA">Close</button></center>
</div>
<!--San Fernando-->
<div id="SF" class="collapse here">
<h3>Welcome to San Fabian!</h3>
<h4>Where are you from?</h4>
<center>
<select class="form-select w-50" aria-label="Default select example">
<option value="1">Region 1</option>
<option value="2">Region 2</option>
<option value="3">Region 3</option>
</select>
</center>
<div class = "row align-items-center">
<div class = "col-md-6">
<table class = "table-bordered">
<tr>
<th colspan = "2"><h3>Point to Point</h3></th>
</tr>
<tr>
<td>
<h4>VIP</h4>
<ul>
<li>1,000 php per head </li>
<li>Premium Airconditioner Bus </li>
</ul>
</td>
<td>
<h4>Regular</h4>
<ul>
<li>500 php per head </li>
<li>Airconditioner Bus </li>
</ul>
</td>
</tr>
</table>
</div>
<div class = "col-md-6">
<table class = "table-bordered">
<tr>
<th colspan="2"><h3>Per Terminal</h3></th>
</tr>
<td>
<h4>VIP</h4>
<ul>
<li>1600 php per head </li>
<li>Premium Airconditioner Bus </li>
</ul>
</td>
<td>
<h4>Regular</h4>
<ul>
<li>300 php per head </li>
<li>Airconditioner Bus </li>
</ul>
</td>
</table>
</div>
</div>
<p>
<br> Present your Student/Senior/PWD ID upon paying to get the 20% discount on fare according to
<br> Republic Act No. 11314
<br> Republic Act No. 10754
<br> Republic Act No. 9994
</p>
<center> <button class = "btn closeB">Close</button></center>
</div>
<!--Vigan-->
<div id="vigan" class="collapse here">
<h3>Welcome to Vigan</h3>
<h4>Where are you from?</h4>
<center>
<select class="form-select w-50" aria-label="Default select example">
<option value="1">Region 1</option>
<option value="2">Region 2</option>
<option value="3">Region 3</option>
</select>
</center>
<div class = "row align-items-center">
<div class = "col-md-6">
<table class = "table-bordered">
<tr>
<th colspan = "2"><h3>Point to Point</h3></th>
</tr>
<tr>
<td>
<h4>VIP</h4>
<ul>
<li>1,000 php per head </li>
<li>Premium Airconditioner Bus </li>
</ul>
</td>
<td>
<h4>Regular</h4>
<ul>
<li>500 php per head </li>
<li>Airconditioner Bus </li>
</ul>
</td>
</tr>
</table>
</div>
<div class = "col-md-6">
<table class = "table-bordered">
<tr>
<th colspan="2"><h3>Per Terminal</h3></th>
</tr>
<td>
<h4>VIP</h4>
<ul>
<li>1600 php per head </li>
<li>Premium Airconditioner Bus </li>
</ul>
</td>
<td>
<h4>Regular</h4>
<ul>
<li>300 php per head </li>
<li>Airconditioner Bus </li>
</ul>
</td>
</table>
</div>
</div>
<p>
<br> Present your Student/Senior/PWD ID upon paying to get the 20% discount on fare according to
<br> Republic Act No. 11314
<br> Republic Act No. 10754
<br> Republic Act No. 9994
</p>
<center> <button class = "btn closeC">Close</button></center>
</div>所以另一个按钮不起作用，我需要我的代码做的是在单击 .btnA 时禁用 .btnB 和 .btnCtrong>
【问题讨论】：
-
这不行吗？ “a
#con2”是什么意思？只有一个#con2，the#con2。如果您有多个 ID 相同的按钮#con2并且想知道为什么$("#con2").attr("disabled", true);只影响第一个，这是 Why does Jquery only affect the first div element? 中的 duplicate。 -
$("#con2").attr("disabled", true);它在我的 HTML 上不起作用，就像它没有禁用某个按钮一样。
-
这给了你什么：
console.log($("[id=con2]").length)如果它是 0，那么你没有id=con2元素，如果它大于 1，那么你有重复的 ID，它只对第一个起作用。 -
What Do You Mean “It Doesn’t Work”? 您的
<script>高于您的 HTML 没有defer属性且没有DOMContentLoaded或load侦听器吗？见Why does jQuery or a DOM method such asgetElementByIdnot find the element?。请尝试使用浏览器的debugging capabilities，edit 您的问题并提供minimal reproducible example，包括所有错误，展示您的研究和尝试。 -
您的编辑并没有明确 您的脚本在哪里，正如我之前的评论所暗示的那样。
标签： html jquery css function button