This is a test file where I want to implement the following functionality as described but another web app where there is a table with a foreach to display data from a mysql database
the idea is that by pressing btn1 of row 0 I deactivate btn2 and btn3 of row 0 by pressing btn1 of row 1 I deactivate btn2 and btn3 of row 1, but btn1 of row 0 deactivates the btn2 and btn3 from row 0 AND btn1 from row 1 disables btn2 and btn3 from row 0.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<br>
<br>
<?php for ($i=0; $i <3 ; $i++) { ?>
<label>fila <?php echo $i; ?></label>
<button id="btn1" class="btn btn-primary mb-3" onclick="deshabilitar2(),deshabilitar()">btn1</button>
<button id="btn2" class="btn btn-primary mb-3">btn2</button>
<button id="btn3" class="btn btn-primary mb-3">btn3</button>
<br>
<?php } ?>
<script type="text/javascript" src="desc.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
The javascript file
var btn1=document.getElementById('btn1'),
btn2=document.getElementById('btn2'),
btn3=document.getElementById('btn3'),
contador=0;
contador2=0;
function deshabilitar() {
if (contador==0) {
document.getElementById('btn2').disabled=true;
contador=1;
}else{
document.getElementById('btn2').disabled=false;
contador=0;
}
}
function deshabilitar2() {
if (contador2==0) {
document.getElementById('btn3').disabled=true;
contador2=1;
}else{
document.getElementById('btn3').disabled=false;
contador2=0;
}
}
Well, as I said before, it doesn't matter which btn1 you press, only btn2 and btn3 of row 0 are deactivated and not their respective rows.
As you have already been told, and I also told you, you repeat ids.
But in your javascript you almost repeat the function, because they are both very similar, which also give errors because
contador
theycontador2
get messy when you press different buttons several times, so I have applied these changes to my solution, executing only one function that can contain as many buttons as you want, passing them in an array:And then remove all your javascript and put this:
Here's a working example of what it should look like with the php already parsed (I've removed the popper.min.js and boostrap.min.js because the bootstrap.bundle.min.js already contains both and you were loading them multiple times):
That happens because you repeat your ID's, the ID's must be unique per page and by repeating them the browsers can operate as they want, where they generally take the first element found.
The easiest thing is to concatenate the row number to the ID (Pay attention to the IDs of the buttons and the events, where we will pass the row number)
then in javascript
update
About your question in the comments:
The first thing is to be clear about what PHP does, which creates (prints) a document. Usually the document is HTML and it prints HTML elements as well, but actually you can create javascript, CSS or even other types of documents.
For example this code
It transforms in
This is what reaches your browser, where the Javascript begins to operate and for which when you press a button it calls the "disable" function by sending it a parameter. Which parameter? the one with the corresponding button fixed
What you say you had
It's not that it can't be done, it's just that under your logic and your need it didn't help you much, because when you exit PHP this is fixed and you needed it to be dynamic, so that for a button in a row X it would do something to other buttons of the same row, where X is the variable of the row. That dynamism is what you solve by passing the variable by parameter.