Javascript / Jquery复选框条件超链接

Question

我有一个使用JavaScript提交表单的超链接/图像按钮，

<p>
  <a href="#" onclick="checkOutFrm.submit();">
    <img src="images/btn-checkout-basket.gif" width="169" height="28" alt="Checkout" border="0" />
  </a>
</p>

并希望添加一个复选框，以禁用超链接，直到选中它为止。 我该怎么做呢？

任何帮助非常感谢，S。

Answer 1

在提交数据之前，您可以先检查复选框的值。

<a href="javascript: if(getElementById('CheckBoxID').checked) { checkOutFrm.submit(); } else { return false; }">

如果您使用jQuery，则更愿意这样做：

$(function(){
    $("a").click(function(e){
        e.preventDefault();
        $("#CheckBoxID").val() && $("form").submit();
    });
});

Answer 2

通常，您不应该：

将您的JavaScript混合到您的HTML标记中（您应该以编程方式附加逻辑处理程序） ，
（ab）仅为JavaScript使用锚元素（你应该使用一个按钮，或者直接将onclick处理程序放在img上） ，也不
在单个元素的单击上放置一个表单的提交处理程序（您应该处理表单的onsubmit事件） 。

我不知道您所处的情况，但是我会在您的HTML文件中执行此操作：

<!-- Put a valid doctype here -->
<html><head>
  <script type="text/javascript" src="submit.js"></script>
</head><body>
  <form id="myform" ...>
    <label>
      <input type="checkbox" name="accept" id="accept-box" />
      I accept
    </label>
    <button type="submit" id="submitter" disabled="disabled">
      <img src="..." />
    </button>
  </form>
</body></html>

...这在你的submit.js文件中：

window.onload = function(){
  var accept = document.getElementById('accept-box');
  var submit = document.getElementById('submitter');
  accept.onclick=function(){
    submit.disabled = !accept.checked;
  };
  document.getElementById('myform').onsubmit = function(){
    // Prevent form submission by any means unless
    // the accept button is checked.
    return accept.checked;
  };
};

（嗯，实际上，我个人将使用jQuery处理事物的JS方面：）

$(function(){
  $('#accept-box').click(function(){
    $('#submitter').attr('disabled',!this.checked);
  });
  $('#myform').submit(function(){
    return $('#accept-box').attr('checked');
  });
});

如果您愿意，可以使用CSS来设置图像周围的按钮;

#submitter { border:0; padding:0 }

Answer 3

您可以使用Jquery Validator http://bassistance.de/jquery-plugins/jquery-plugin-validation/来强制它。

Javascript / Jquery复选框条件超链接

问题描述

3 个解决方案

解决方案1
1 2010-11-22 13:36:03

解决方案2
1 已采纳 2010-11-22 14:02:19

解决方案3
0 2010-11-22 13:34:06

Javascript / Jquery复选框条件超链接

问题描述

3 个解决方案

解决方案1 1 2010-11-22 13:36:03

解决方案2 1 已采纳 2010-11-22 14:02:19

解决方案3 0 2010-11-22 13:34:06

解决方案1
1 2010-11-22 13:36:03

解决方案2
1 已采纳 2010-11-22 14:02:19

解决方案3
0 2010-11-22 13:34:06