草庐IT

javascript - 限制/禁用/启用复选框

coder 2024-12-27 原文

我对这个链接有疑问:Limiting default checked checkboxes .

我扩展了验证脚本的代码，这就是我想要做的。

  1. 我想要一个默认选中的复选框。
  2. 我想限制复选框的选择，例如:如果 mvp 是 3，我应该选择 3 并禁用其余的复选框，就像这样。 Limit Checkbox .
  3. 如果未达到选择，我想禁用提交按钮，例如，如果给定的最大数量为 5。如果选择未选中 5，则提交按钮将不会启用。

这是我的示例代码:

var mvp = 5;

$(document).ready(function() {


    $("input:checkbox").each(function( index ) {
        this.checked = ( index < mvp );
    });

$("input:checkbox").click(function() {

  var bol = $("input:checkbox:checked").length != mvp;

  if(bol){
  alert("You have to choose "+ mvp +" mvp's only");
  this.checked = false;
  $("#button-cart").attr("disabled", true);
  }
  else{
  $("input:checkbox").not(":checked").attr("disabled",bol);
  $("#button-cart").attr("disabled", false);
  }
});

});

这是 fiddle :fiddle

根据示例，我在 5 中设置了 mvp 的值。当页面加载时，默认选中了 5 个复选框。然后，如果您取消选中 1，则将触发警报，提示您应该拥有 5 个 mvp，然后该按钮将禁用。一旦您再次选中一个复选框，该按钮就会出现。但用户可以选择 2 个左侧复选框。但如果用户超过 5 个选择，则警报将再次触发并将其返回到 5 个选中的复选框。这里的问题是按钮将保持禁用状态。

你能帮我做这种逻辑吗:D 在此先感谢..

最佳答案

试试这个，

var mvp = 5;
$(document).ready(function () {
    $("input:checkbox").each(function (index) {
        this.checked = (index < mvp);
    }).click(function () {
       en_dis= $("input:checkbox:checked").length < mvp
       $('#button-id').prop('disabled', en_dis);
       // to disable other checkboxes
       $('input:checkbox:checked').length >= mvp &&
           $("input:checkbox:not(:checked)").prop('disabled',true);
    }).change(function () {
       if ($(this).siblings(':checked').length >= mvp) {
           this.checked = false;
       }
    });
});

Working Demo和 Updated Demo

关于javascript - 限制/禁用/启用复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20964701/

javascript限制checked34checkboxjquery

有关javascript - 限制/禁用/启用复选框的更多相关文章

  1. ruby-on-rails - 启用 Rack::Deflater 时 ETag 发生变化 - 2

    在启用Rack::Deflater来gzip我的响应主体时偶然发现了一些奇怪的东西。也许我遗漏了一些东西，但启用此功能后，响应被压缩，但是资源的ETag在每个请求上都会发生变化。这会强制应用程序每次都响应，而不是发送304。这在没有启用Rack::Deflater的情况下有效，我已经验证页面源没有改变。我正在运行一个使用thin作为Web服务器的Rails应用程序。Gemfile.lockhttps://gist.github.com/2510816有没有什么方法可以让我从Rack中间件获得更多的输出，这样我就可以看到发生了什么？提前致谢。 最佳答案

  2. python - 是否可以使用 Ruby 或 Python 禁用 anchor /引用来发出有效的 YAML？ - 2

    是否可以在PyYAML或Ruby的Psych引擎中禁用创建anchor和引用(并有效地显式列出冗余数据)？也许我在网上搜索时遗漏了一些东西，但在Psych中似乎没有太多可用的选项，而且我也无法确定PyYAML是否允许这样做.基本原理是我必须序列化一些数据并将其以可读的形式传递给一个不是真正的技术同事进行手动验证。有些数据是多余的，但我需要以最明确的方式列出它们以提高可读性(anchor和引用是提高效率的好概念，但不是人类可读性)。Ruby和Python是我选择的工具，但如果有其他一些相当简单的方法来“展开”YAML文档，它可能就可以了。 最佳答案

  3. ruby-on-rails - 禁用设备的 :confirmable on-the-fly to batch-generate users - 2

    Devise是一个Ruby库，它为我提供了这个User类:classUser当写入:confirmable时，注册时会发送一封确认邮件。上周我不得不批量创建300个用户，所以我在恢复之前注释掉了:confirmable几分钟。现在我正在为用户批量创建创建一个UI，因此我需要即时添加/删除:confirmable。(我也可以直接修改Devise的源码，但我宁愿不去调和它)问题:如何即时添加/删除:confirmable？ 最佳答案 WayneConrad的解决方案:user=User.newuser.skip_confirmation

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - 在 Label 标签中嵌套 Ruby on Rails HAML 复选框 - 2

    我有以下不起作用的代码:=form_for(resource,:as=>resource_name,:url=>session_path(resource_name),:html=>{:class=>"well"})do|f|=f.label:email=f.email_field:email=f.label:password=f.password_field:password-ifdevise_mapping.rememberable?%p=f.label:remember_me,:class=>"checkbox"=f.check_box:remember_me,:class=>"

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. ruby-on-rails - 如何在 Rails 3 中禁用 XML 解析 - 2

    我想禁用HTTP参数的自动XML解析。但我发现命令仅适用于Rails2.x，它们都不适用于3.0:config.action_controller.param_parsers.deleteMime::XML(application.rb)ActionController::Base.param_parsers.deleteMime::XMLRails3.0中的等价物是什么？ 最佳答案 根据CVE-2013-0156的最新安全公告你可以将它用于Rails3.0。3.1和3.2ActionDispatch::ParamsParser::

  8. ruby-on-rails - 嵌套形式的 HABTM 复选框 - 2

    我正在尝试以嵌套形式实现HABTM复选框。目前，我有3个模型。主题、类(class)和小组。协会如下:每个科目都有很多课。每节课都属于许多小组。现在，我正在尝试在单个创建和编辑表单上实现它们。这样一节课嵌套在主题中，每节课都有一个组复选框列表来实现HABTM关系。我在实现HABTM关系时遇到了麻烦，因为每个科目都有很多类(class)，而且我不确定如何区分不同的类(class)。为了进一步详细说明，我能够使嵌套表单正常工作，但我无法让HABTM复选框保存到正确的类(class)中。以下代码示例是我的HABTM复选框实现。目前，我已经使用“subject[lessons_attribut

  9. ruby-on-rails - 限制 will_paginate 中的页数 - 2

    因此，在使用Sphinx时，搜索限制为1000个结果。但是，如果will_paginate生成的结果分页链接超过1000个，请不要考虑这一点，并提供指向超过1000/per_page的页面的链接。设置最大页数或类似内容的明显方法是什么？干杯。 最佳答案 我认为最好将参数:total_entries提交给方法paginate:@posts=Post.paginate(:page=>params[:page],:per_page=>30,:total_entries=>1000)will_paginate将仅为显示1000个结果所需的页

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐