So I wanted to make a other buttons disabled when a button was once clicked
$(".btnA").click(function () {
$("#con1").show(1000, "swing");
$("#con2").attr("disabled", true);
});
Can I make a #con2 disabled if the btnA is clicked? Do I need to have a if..else condition to do this? Is it possible that when a button is clicked in jquery, other buttons will disabled? Edit Post
<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>So the other button is not working, what I need my code to do is to disable the .btnB and .btnC when the .btnA was once clicked
