【问题标题】:Can a checkbox only be checked after a user clicks a hyperlink (Terms and Conditions?)?只有在用户单击超链接(条款和条件?)后才能选中复选框?
【发布时间】:2019-03-29 19:13:57
【问题描述】:

我正在尝试编写一个表单,用户可以在其中选择一个选项,并且某些表单会作为该选项的结果显示——我可以很好地使用 jquery。接下来,我试图让用户必须先单击条款和条件的超链接,然后才能选中复选框。

我已经看到了多个用户必须单击复选框才能看到超链接的示例,但我想知道它是否可以反过来。

<div id="additionalForm" class="FormDiv">
  <fieldset>
    <legend>Housing Agreement</legend>
    <input id="chkSignature" name="chkSignature" type="checkbox" required>
    <label for="chkSignature">
       <b>I have read and I agree to the 
	  <a href="TermsandConditions.asp" target="_blank">Terms and Conditions</a>
       </b>
    </label>
  </fieldset>
</div>

现在,我对复选框进行了验证,但我无法查看它们是否真的在阅读超链接中的内容。我想让用户点击我的 HTML 中的超链接,然后才能选中该框。

【问题讨论】:

  • 所以禁用该复选框,并为链接添加一个点击事件监听器。当它被点击时,从复选框中删除 disabled 属性

标签: jquery html css asp-classic


【解决方案1】:
  • 在复选框上添加了disabled 属性
  • 为点击链接添加了点击事件监听
  • 删除了点击链接时的禁用属性

document.querySelector('#termsAndConditions')
  .addEventListener('click', function(e){
    document.querySelector('#chkSignature').removeAttribute('disabled');
  });
<div id="additionalForm" class="FormDiv">
  <fieldset>
    <legend>Housing Agreement</legend>
    <input id="chkSignature" name="chkSignature" type="checkbox" required disabled>

    <label><b>I have read and I agree to the <a href="TermsandConditions.asp" target="_blank" id="termsAndConditions">Terms and Conditions</a></b></label>

  </fieldset>
</div>

【讨论】:

  • 这太棒了!我只是不知道这个功能,因为我是新手。话虽如此,即使不检查 #chkSignature 用户仍然可以通过 HTML 提交,因为在单击链接之前表单被禁用。因此不再需要该表格。我已经对此表单进行了后端验证,因此他们无法提交表单,但为了保持一致性,有没有办法让所需的复选框被禁用?
  • 要求用户无法与之交互的东西是没有意义的。
  • 只有当我的选择列表中的某个变量被选中时,该复选框才可见。所以我认为无论如何都需要这个复选框是有意义的,并且只有在用户阅读条款后才能点击。无论如何,我真的很感谢您的及时回复,我想我已经足够感谢您了。
  • 请记住,“禁用”和“隐藏”是有区别的。隐藏的输入仍将在表单提交时发送。一个残疾人不会。因此,根据您的需求,您可以在开发者工具带中使用这两种不同的工具。
猜你喜欢
  • 1970-01-01
  • 2021-12-12
  • 1970-01-01
  • 2015-12-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-08-24
  • 2021-04-03
相关资源
最近更新 更多