html表单按钮灰色,点击提交按钮后按钮变灰色不可用状态的三种方法

方法一：

使用CSS伪类选择器 `:disabled`，设置按钮的样式为灰色，并添加 `disabled` 属性。

HTML代码：

<form>
  <input type="text" placeholder="输入内容">
  <button type="submit" disabled>提交</button>
</form>

CSS代码：

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

方法二：

使用JavaScript，在提交按钮被点击时将按钮的 `disabled` 属性设置为 `true`，并将样式设置为灰色。

HTML代码：

<form>
  <input type="text" placeholder="输入内容">
  <button type="submit" onclick="this.disabled=true;this.style.backgroundColor='#ccc';">提交</button>
</form>

方法三：

使用jQuery，在提交按钮被点击时添加 `disabled` 属性，并设置样式为灰色。

HTML代码：

<form>
  <input type="text" placeholder="输入内容">
  <button type="submit" id="submit-btn">提交</button>
</form>

jQuery代码：

$('#submit-btn').click(function() {
  $(this).prop('disabled', true).css('background-color', '#ccc');
});