结帐opencart上的必填复选框

Posted 2023-03-05

【中文标题】结帐opencart上的必填复选框

【英文标题】：Required checkbox on checkout opencart

【发布时间】：2018-10-24 03:10:46

【问题描述】：

我想在我的 opencart 2.1.0.1 版本（使用日记主题）的结帐页面上添加一个自定义的 REQUIRED 复选框。 我会用这个<input type="checkbox" 轻松创建它 但是我怎样才能使用 javascript 来使它成为必需的呢？

【参考方案1】：

只需检查复选框的 checked 属性即可。据此，提交您的表单或阻止它提交。

function validate() 
  var checkbox = document.querySelector('#check');
  
  if (!checkbox.checked) 
    alert("Please check the checkbox!");
    return false;
  
  return true;

<form onsubmit="return validate()" action="">
  <input type="checkbox" id="check">
  <button>Send</button>
</form>

编辑：

如果您的 html 中没有 form，您可以禁用提交按钮，直到选中复选框，如下所示：

function enableSubmit() 
  var button = document.querySelector('#btn');
  var checkbox = document.querySelector('#check');
  
  if (checkbox.checked == false) 
    button.setAttribute('disabled', '');
   else if (checkbox.checked == true) 
    button.removeAttribute('disabled');
  

<input type="checkbox" id="check" onclick="enableSubmit()"><button type="submit" id="btn" disabled>Submit</button>

编辑 2

如果您只想显示错误消息，则可以选择切换 div 的可见性：

function validate() 
  var checkbox = document.querySelector('#check');
  var errorDiv = document.querySelector('#error');
  
  if (checkbox.checked == false) 
    errorDiv.style.display = "block";
   else if (checkbox.checked == true) 
    errorDiv.style.display = "none";
  

#error 
  width: 100%;
  height: 20px;
  background-color: #f44b42;

<input type="checkbox" onclick="validate()" id="check"><button id="btn">Send</button>
<div id="error" style="display: block">Please check the checkbox.</div>

【讨论】：

问题是我不使用form，这个验证必须在结帐页面上的提交按钮上工作

@ДобромирМилчев 请看看我更新的答案。

不，我希望按钮一直处于启用状态，只是我想在未标记复选框时显示错误消息

@ДобромирМилчев 我不明白你为什么要这样做，因为如果需要，用户不应该在不选中复选框的情况下提交，但无论如何。我已经更新了我的答案。