Question

我有一个巨大的问题，试图找出如何使这个协议形式工作。它的设计使得人们必须接受提交条款和条件，如果他们不检查框，则提交按钮变为灰色且不可用。它完全按原样运行，但现在我想用这个图像

替换该提交按钮

它就像订单图像，将您重定向到结帐页面。我已经做了很多研究，但我似乎没有得到我正在寻找的答案。我尝试过造型，除了一切都行之有效。

我非常感谢你的帮助，非常感谢!!

＆＃13;

<html>
<head>
<script>
 function disableSubmit() {
  document.getElementById("submit").disabled = true;
 }

  function activateButton(element) {

      if(element.checked) {
        document.getElementById("submit").disabled = false;
       }
       else  {
        document.getElementById("submit").disabled = true;
      }

  }
</script>
</head>
<h6> Tube Cash Blueprint Agreement</h6>
<body onload="disableSubmit()">
 <input type="checkbox" name="terms" id="terms" onchange="activateButton(this)"/>  Check here to indicate that you have read and agreed to the terms of the <a target="_blank" href="https://johnmichaelmarketing.com/tbc-agreement/">Tube Cash Blueprint Costumer Agreement</a>
<br/><br/>
  <input type="submit" name="submit" id="submit"/>
</body>
</html>

＆＃13;

Answer 1

禁用提交按钮是一个坏主意，它可以为其他方面提供问题，例如辅助功能。

您想要的是进行表单验证，并根据您的解决方案提供必需的属性。

查看以下示例，该示例正在执行您要实现的目标。

http://www.the-art-of-web.com/html/html5-checkbox-required/

Answer 2

尝试运行下面的代码段，基本上是在按钮内添加图片。

<html>
<head>
<script>
 function disableSubmit() {
  document.getElementById("submit1").disabled = true;
  document.getElementById("submit2").disabled = true;
 }

  function activateButton(element) {

      if(element.checked) {
        document.getElementById(element.getAttribute("data-id")).disabled = false;
       }
       else  {
        document.getElementById(element.getAttribute("data-id")).disabled = true;
      }

  }
</script>
</head>
<h6> Tube Cash Blueprint Agreement</h6>
<body onload="disableSubmit()">
 <input type="checkbox" name="terms" id="terms" onchange="activateButton(this)" data-id="submit1"/>  Check here to indicate that you have read and agreed to the terms of the <a target="_blank" href="https://johnmichaelmarketing.com/tbc-agreement/">Tube Cash Blueprint Costumer Agreement</a>
<br/><br/>
  <button type="submit" id="submit1" onclick="document.location.href='https://www.jvzoo.com/b/570‌51/250513/13';"><img src="https://i.jvzoo.com/57051/250513/13" alt="Submit"></button>
      <br/><br/>
       <input type="checkbox" name="terms" id="terms" onchange="activateButton(this)" data-id="submit2"/>  Check here to indicate that you have read and agreed to the terms of the <a target="_blank" href="https://johnmichaelmarketing.com/tbc-agreement/">Tube Cash Blueprint Costumer Agreement</a>
<br/><br/>
  <button type="submit" id="submit2" onclick="document.location.href='https://www.jvzoo.com/b/570‌51/250513/13';"><img src="https://i.jvzoo.com/57051/250467/13" alt="Submit"></button>

</body>
</html>

Answer 3

您不需要javascript，只需要HMTL5和CSS

<html>
<head>
<style type="text/css">    
    form:valid input[type="submit"]{
        background: red;
    }
</style>
</head>
<h6> Tube Cash Blueprint Agreement</h6>
<body>
<form action="#" onsubmit="alert('ok');">
 <input type="checkbox" name="terms" id="terms" required />  Check here to indicate that you have read and agreed to the terms of the <a target="_blank" href="https://johnmichaelmarketing.com/tbc-agreement/">Tube Cash Blueprint Costumer Agreement</a>
  <input type="submit" name="submit" id="submit"/></form>
</body>
</html>

Answer 4

<html>
<head>
<script>
 function disableSubmit() {
    var checkbox = document.getElementById("terms");
    activateButton(checkbox);
 }

function activateButton(element) {
 if(element.checked) {
    document.getElementById("submitBtn").onclick  = function() { submitForm(); };
 }
 else  {
    document.getElementById("submitBtn").onclick  = function() { return false; };
 }
}

function submitForm(element){   
  document.getElementById("testForm").submit();
}

</script>
</head>
<h6> Tube Cash Blueprint Agreement</h6>
<body onload="disableSubmit()">


<form id="testForm">
 <input type="checkbox" name="terms" id="terms" onchange="activateButton(this)"/>  Check here to indicate that you have read and agreed to the terms of the <a target="_blank" href="https://johnmichaelmarketing.com/tbc-agreement/">Tube Cash Blueprint Costumer Agreement</a>
    <br/><br/> 
 <a href="javascript:void(0)" id="submitBtn" ><img src="submit_button.gif" height="60px"></img></a>
 </form>
</body>
</html>

您可以使用两个不同的图像，一个用于启用，另一个用于禁用和替换，然后使用javascript动态。

我想将提交按钮设为href图像

4 个答案: