条款和协议复选框以简单的形式用于答案

【问题标题】：Terms and agreement checkbox in simple form for条款和协议复选框以简单的形式用于
【发布时间】：2023-04-10 06:19:01
【问题描述】：

我正在尝试实现一些非常简单但无法理解的事情。我只是希望用户选择条款和条件，并且不检查就无法继续前进。我决定在客户端验证中进行。

查看 - 复选框

<div class="fl">
    <input type="checkbox" id="checkbox" />
</div>
<div class="agree-txt">
    <span>I agree to <a href="#">Terms and Conditions</a>.</span>
</div>

查看 - 提交按钮

<%= f.button :submit, "Submit", :class=>"big-blue-btn" %>
    <a href = "#" class="text-link"> Sign Up as a User</a>
</li>

JS

$function validateCheckbox() {
    if ($('#checkbox').attr('checked')) {
        alert("you have to accept the terms first");
    }
});

请让我知道如何实现相同的目标，我知道我遗漏了一些非常小的东西但无法找到它。

【问题讨论】：

试试这个if( $('#checkbox').is(':checked'))

标签： javascript jquery ruby-on-rails ruby ruby-on-rails-3

【解决方案1】：

您不应该使用类型为提交的按钮，因为如果您这样做，即使用户不满足特定条件，表单也会被提交。

【讨论】：

【解决方案2】：

if ($('#checkbox').is(':checked'))

对于js-

$(document).ready(function () {
    $(document).on('click', '.big-blue-btn', function () {
        if (validateCheckbox()){
            ... do your submit code ....
        }
    });
});

function validateCheckbox() {
    if (!$('#checkbox').is(':checked')) {
        alert("you have to accept the terms first");
        return false;
    }else{
        return true;
    }
}

对于这种类型的 onclick 事件，我个人会给你的按钮一个 ID 并改用它。

【讨论】：

我这样做了，但我还需要在提交操作中提及相同的内容。你能解释一下吗，因为它是一个简单的 form_for 并且它不包含 onclick() 。
与其使用提交，不如使用点击事件。我将编辑我的答案以包含此内容。
你能指导我完成吗？这里是 js 新手。
在你提到之后我确实使用了 id
在不勾选复选框的情况下仍然可以通过。

【解决方案3】：

我最终以正常的导轨方式进行操作。发布它，以便将来可能对某人有所帮助。

将此添加到我的用户模型中

validates :terms_of_service, acceptance: true

在视图中

<%=f.check_box :terms_of_service %>

你不需要在数据库中有这个字段，rails 默认提供这个。请确保在模型中的 attr_accessible 中提及 terms_of_service，否则会引发质量对齐错误。

【讨论】：

【解决方案4】：

诀窍是防止表单提交，这是通过事件对象上的preventDefault() 方法完成的。最好在表单提交时触发事件而不是单击按钮。这是因为可以通过在文本字段中按 Enter 来提交表单，而不仅仅是单击提交按钮。

# view.html.erb
<%= form_for my_object, html: {id: 'signup-form'} do %>
  ...
<% end %>


/* signup.js */
jQuery(function(){
  $('#signup-form').on('submit', function(event) {
    if(!$('#checkbox').attr('checked')) {
      showTermsAndConditionsErrorMessage();
      event.preventDefault();
    }
  });
});

【讨论】：

【解决方案5】：

试试这个。

var atLeastOneIsChecked = $('#checkbox :checkbox:checked').length > 0;

我上面的答案是错误的，试试这个。

if($("#checkbox-1").prop('checked') == true){
//do something
}

【讨论】：

这行不通。这是将checked 属性设置为false。您需要使用 getter 并检查值。