单列循环中的禁用按钮

Question

我有 1 行和 3 列。每列有 3 个具有不同 id 的按钮。

示例 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"

*我想用 id="2evening"

禁用第 2 列中的按钮

我知道如何使用 javascript 禁用按钮，但我不知道如何操作 javascript 以便我可以禁用我想要的按钮。

HTML代码：

<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代码：

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

问题是 Javascript 在具有 id="1evening"、id="2evening" 和 id="3evening" 的所有列中被禁用的按钮。我想要的是仅使用 id="2evening" 禁用按钮。

谢谢，费扎尔

Answer 1

您的选择器不正确。在 document.getElementById(<id here>) 中，您只需告诉它您要使用的元素 ID。因此，如果您想禁用 2evening 按钮，您可以执行以下操作：

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

更多信息：How to disable html button using JavaScript?

Answer 2

创建函数，然后您可以在每个事件中使用，例如 onload 或 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>

单列循环中的禁用按钮

Disabled button in a loop for single column

javascript

html

button

getelementbyid

disabled-control