禁用html中的复选框

Question

我正在尝试禁用表格数据中的复选框

<table style="width:100%">
  <tr>
    <th>Date</th>       
    <th id="spanDate"></th>
    <th id="spanDate1"></th>        
    <th id="spanDate2"></th>
  </tr>

  <tr>
    <td>00:00-03:00</td>
    <td>
        <input type="checkbox" id="c" name="time" value="00:00-03:00">
        <button onclick="fun()"><-></button>
        <script>
            function fun()
            {
                 document.getElementById("c").disabled=true;
            }
        </script>
   </td>
</tr>

但是当我点击按钮时页面会刷新，但复选框仍然处于启用状态。

Answer 1

1. 您点击提交按钮
2. 该复选框已停用
3. 表格提交
4. 浏览器加载新页面
5. 未在新页面中禁用该复选框（因为它是一个新的复选框）

如果你想让它保持禁用状态，那么你需要让服务器提供一个默认禁用它的页面（或者不提交表单，这样浏览器就会停留在你禁用的原始复选框的页面上与JS）。

Answer 2

你可以这样试试。

function fun(e) {
  e.preventDefault(); //stop refresh page when clicked
  document.getElementById('c').setAttribute("disabled","true");
}