Disabled button in a loop for single column

Question

I have 1 row and 3 column. Each column have 3 buttons with different ids.

example id:

--column 1--       --column 2--       --column 3--
id="1morning"      id="2morning"      id="3morning"
id="1evening"      id="2evening"      id="3evening"
id="1afternoon"    id="2afternoon"    id="3afternoon"

*I want to disable button in column 2 with id="2evening"

I know how to disable button using javascript but I do not know how to manipulate the javascript so that I can disable the button that I want.

HTML code:

<br>
<div class="col-md-9">
  <div class="well.hilang"> 
    <table>
      <tr>
       <?php
       for ($i=1; $i <=3 ; $i++) { 
         ?>
         <td>
           <?php echo $i;?>  
           <div class="form-group">
             <input class="btn btn-l" type="submit" name="submit" id="<?php echo $i;?>morning" ><br>
             <input class="btn btn-l" type="submit" name="submit" id="<?php echo $i;?>evening" ><br>
             <input class="btn btn-l" type="submit" name="submit" id="<?php echo $i;?>afternoon" >
           </div>
         </td>
         <?php }
         ?>
       </tr>
     </table>
   </div>
 </div>

JS code:

<?php for ($i=1; $i <=3 ; $i++) { ?>
<script>
  document.getElementById("<?php echo $i;?>evening").disabled = true;
</script>
<?php } ?>

The problem is the Javascript disabled button in all column that have id="1evening", id="2evening" and id="3evening". What I want is to disable button with id="2evening" only.

Thanks, faizal

if(evening === "2evening"){ document.getElementById("2evening").disabled = true; } — brk, Oct 29 '15 at 03:41
I dont want to set it manually, I want to use loop. Or maybe I can put If statement before the loop this JS loop code? — Fai Zal Dong, Oct 29 '15 at 05:49

score 3 · Accepted Answer · edited May 23 '17 at 12:08

3

Your selector isn't correct. In document.getElementById(<id here>), you just need to tell it the element ID that you want to work with. So if you want to disable the 2evening button, you would do the following:

document.getElementById("2evening").disabled = true;

More Information: How to disable html button using JavaScript?

edited May 23 '17 at 12:08

Community

1
1

answered Oct 29 '15 at 03:41

mwilson

10,186
5
41
72

score 0 · Answer 2 · answered Oct 29 '15 at 04:07

0

Make function for than then you can use with every event like onload or onclick

HTML

<body onload="myFunction()" >
    <button id="myBtn" >My Button</button>
    <!--<button id="makesomething" onclick="myFunction()">Click Here to Disable above button</button>-->
</body>

JavaScript

<script>
function myFunction() {
    document.getElementById("myBtn").disabled = true;
}
</script>

answered Oct 29 '15 at 04:07

Gaurang Joshi

629
15
30

does not help anything. anyway thanks for the answer – Fai Zal Dong Oct 29 '15 at 06:06
this is to clear your fundamentals. this is not ready-made answer. – Gaurang Joshi Oct 29 '15 at 09:03

Disabled button in a loop for single column

2 Answers2