Question

我在一个页面中有多个具有相同输入名称的表单。表单之间的唯一区别是包含它们的表单。

对于表单上的复选框组，我只想要检查三个中的两个复选框，但我不希望一个表单中的复选框影响另一个。

我现在拥有一个jsFiddle。

我已经设置了现在只能从三个中选中两个复选框，但是对于整个文档而言，这不是特定于形式的。

我页面中的表单是用循环创建的，表单的id是它们之间唯一的区别。

任何人都可以提供帮助吗？

https://jsfiddle.net/likwidmonster/3zbs61q5/

＆＃13;

$('input[type=checkbox][name=group]').on('change', function(e) {
  if ($('input[type=checkbox][name=group]:checked').length < 2) {
    $('input[type=checkbox][name=group]:not(:checked)').prop('disabled', false);
  }
  if ($('input[type=checkbox][name=group]:checked').length == 2) {
    $('input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h4>
Form 1
</h4>
  <form id="form_1">
    <input type="checkbox" name="group" value="1">
    <input type="checkbox" name="group" value="2">
    <input type="checkbox" name="group" value="3">
  </form>
</div>

<div>
<h4>
Form 2
</h4>
  <form id="form_2">
    <input type="checkbox" name="group" value="1">
    <input type="checkbox" name="group" value="2">
    <input type="checkbox" name="group" value="3">
  </form>
</div>

＆＃13;

Answer 1

这是一个有效的解决方案。希望它有所帮助！

$('input[type=checkbox][name=group]').on('change', function(e) {
  if ($('#form_1 input[type=checkbox][name=group]:checked').length === 2) {
    $('#form_1 input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled');
  }else{
  $('#form_1 input[type=checkbox][name=group]:not(:checked)').prop('disabled', false);
  }
  if ($('#form_2 input[type=checkbox][name=group]:checked').length === 2) {
    $('#form_2 input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled');
  }else{
  $('#form_2 input[type=checkbox][name=group]:not(:checked)').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
<h4>
Form 1
</h4>
  <form id="form_1">
    <input type="checkbox" name="group" value="1">
    <input type="checkbox" name="group" value="2">
    <input type="checkbox" name="group" value="3">
  </form>
</div>

<div>
<h4>
Form 2
</h4>
  <form id="form_2">
    <input type="checkbox" name="group" value="1">
    <input type="checkbox" name="group" value="2">
    <input type="checkbox" name="group" value="3">
  </form>
</div>

Answer 2

由于您的表单是动态的，因此可以更好地使用它。

我确实创建了一个jsfiddle并将其发布在评论中，但这只适用于这两种形式。也许你想添加更多？ JSFiddle Demo

<div>
<h4>
Form 1
</h4>
  <form id="form_1">
    <input type="checkbox" name="group" value="1">
    <input type="checkbox" name="group" value="2">
    <input type="checkbox" name="group" value="3">
  </form>
</div>

<div>
<h4>
Form 2
</h4>
  <form id="form_2">
    <input type="checkbox" name="group2" value="1">
    <input type="checkbox" name="group2" value="2">
    <input type="checkbox" name="group2" value="3">
  </form>
</div>

this.parentNode.id;用于定位触发函数的元素，this用于获取表单元素，.parentNode用于获取表单的ID，以便您可以将其定位特定形式意味着您只需要一个.id条件就可以为所有表单运行它！

if

$('form input[type=checkbox][name=group]').on('change', function(e) {
var MyForm=this.parentNode.id;
  if ($('form[id='+MyForm+'] input[type=checkbox][name=group]:checked').length == 2) {
    $('form[id='+MyForm+'] input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled');
  }else{
  $('form[id='+MyForm+'] input[type=checkbox][name=group]:not(:checked)').prop('disabled', false);
  }
});

如果您有任何疑问，请在下方发表评论，我会尽快回复您。

我希望这有帮助。快乐的编码！

Answer 3

使用函数初始化每个组的事件处理程序。还可以使用其他组名。

https://jsfiddle.net/3zbs61q5/3/

#define GLEW_STATIC
#include <GL/glew.h>
#include <GLFW/glfw3.h>

#include <iostream>
#include <fstream>
#include <string>

#include "shader.h"
#include "cube.h"
#include "camera.h"

using namespace std;

int main(int argc, char* argv[])
{
    if (argc != 3)
    {
        cout << "Incorrect number of arguments!" << endl;
        cout << "Usage: [executable] vertexShader fragmentShader" << endl;
        return -1;
    }

    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
    glfwWindowHint(GLFW_RESIZABLE, GL_FALSE);

    GLFWwindow* window = glfwCreateWindow(800, 600, "Scene Description Language Generator", nullptr, nullptr);
    if (window == nullptr)
    {
        std::cout << "Failed to create the GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }

    glfwMakeContextCurrent(window);
    glewExperimental = GL_TRUE;
    if (glewInit() != GLEW_OK)
    {
        std::cout << "Failed to initialize GLEW" << std::endl;
        return -1;
    }

    glEnable(GL_DEPTH_TEST);

    int width, height;
    glfwGetFramebufferSize(window, &width, &height);

    glViewport(0, 0, width, height);

    Shader shader(argv[1], argv[2]);

    Cube c;

    GLuint modelMat = glGetUniformLocation(shader.GetProgram(), "model");

    c.SetModelMatrixLoc(modelMat);

    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();

        glClearColor(0.2f, 0.3f, 0.3f, 1);
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

        shader.Use();
        c.Draw();

        glfwSwapBuffers(window);
    }

    glfwTerminate();
    return 0;
}

function setupCheckboxGroup(grpName){

$('input[type=checkbox][name='+grpName+']').on('change', function(e) {
  if ($('input[type=checkbox][name='+grpName+']:checked').length < 2) {
    $('input[type=checkbox][name='+grpName+']:not(:checked)').prop('disabled', false);
  }
  if ($('input[type=checkbox][name='+grpName+']:checked').length == 2) {
    $('input[type=checkbox][name='+grpName+']:not(:checked)').prop('disabled', 'disabled');
  }
});

}

setupCheckboxGroup('group');
setupCheckboxGroup('group2');

每个表单只选中2个复选框

3 个答案: