<script type="text/javascript">
function button1() {
var elem = document.getElementById("button1");
if (elem.value=="Choose") elem.value = "Selected";
else elem.value = "Choose";
}
function button2() {
var elem = document.getElementById("button2");
if (elem.value=="Choose") elem.value = "Selected";
else elem.value = "Choose";
}
function button3() {
var elem = document.getElementById("button3");
if (elem.value=="Choose") elem.value = "Selected";
else elem.value = "Choose";
}
function button4() {
var elem = document.getElementById("button4");
if (elem.value=="Choose") elem.value = "Selected";
else elem.value = "Choose";
}
function button5() {
var elem = document.getElementById("button5");
if (elem.value=="Choose") elem.value = "Selected";
else elem.value = "Choose";
}
</script>
How do disable all the buttons if I select one button. Do I have to disable all the buttons one by one or is there a way to do all the buttons.
CodePudding user response：
Always avoid repetitive code.
By "disabling all buttons", I guess you mean set their value back to "Choose".
<script type="text/javascript">
function buttonBehavior(num) {
// reset all buttons
let i=1;
while(document.getElementById("button" i)!==null) {
document.getElementById("button" i).value = 'Choose';
i ;
}
// set selected button
var elem = document.getElementById("button" num);
if (elem.value=="Choose") elem.value = "Selected";
else elem.value = "Choose";
}
</script>
CodePudding user response：
Alright, with whatever you have given, maybe you're looking for something like a radio button. I am using Bootstrap and jQuery - it's much easier than vanilla JavaScript to achieve something that you're trying to do:
$(function () {
$(".btn").click(function () {
$(".btn").prop("disabled", true);
$(this).prop("disabled", false).addClass("active");
$("p").text("You have clicked on button #" $(this).data("id") ".");
$(this).text("Selected");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
<div class="p-5">
<button class="btn btn-primary button-1" data-id="1">Choose 1</button>
<button class="btn btn-primary button-2" data-id="2">Choose 2</button>
<button class="btn btn-primary button-3" data-id="3">Choose 3</button>
<button class="btn btn-primary button-4" data-id="4">Choose 4</button>
<button class="btn btn-primary button-5" data-id="5">Choose 5</button>
<p id="status" class="py-3"></p>
</div>On clicking of any button above, the respective button will be activated and the others will be disabled.
Feel free to ask for any more changes.