Question

请你帮我解决我的复选框，因为我使用生成器创建复选框和所有工作，但我需要配置min和max选择此复选框在JavaScript中。我使用了大部分的东西，没有任何工作，我仍然可以选择所有，但我只需要从三个检查。

脚本：

<script type="text/javascript">
var limit = 1;
$('input.css-checkbox + label.css-label').on('change', function (evt) {
    if ($(this).siblings(':checked').length >= limit) {
        this.checked = false;
    }
});
</script>

HTML

<table style="border-spacing: 5px; border-collapse: separate;">
        <tr>
            <td>
                <input type="checkbox" name="check_lang" id="check_cz" class="css-checkbox" />
                <label for="check_cz" class="css-label"><img src="http://terquil.cz/images/cz.png" class="img-flag" alt="CZ" /></label>

            </td>
            <td><h2>CZ</h2></td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check_lang" id="check_en" class="css-checkbox" />
                <label for="check_en" class="css-label"><img src="http://terquil.cz/images/uk.png" class="img-flag" alt="EN" /></label>

            </td>
            <td><h2>EN</h2></td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check_lang" id="check_de" class="css-checkbox" />
                <label for="check_de" class="css-label"><img src="http://terquil.cz/images/de.png" class="img-flag" alt="DE" /></label>
            </td>
            <td><h2>DE</h2></td>
        </tr>
    </table>

CSS：

input[type=checkbox].css-checkbox {
      position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left:37px;
    height:32px; 
    display:inline-block;
    line-height:32px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:32px;
    vertical-align:middle;
    cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -32px;
}
label.css-label {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_c1a4f40d98f1c23d1ad84d2af9c314be.png);
    -webkit-touch-callout: none;
-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

如果您有任何意见我该如何解决，请帮助我。

我为我的代码尝试了这个脚本，它也不起作用。

测试脚本:(不工作）

$("input[name=check_lang]").change(function(){
    var max= 1;
    if( $("input[name=check_lang]:checked").length == max ){
        $("input[name=check_lang]").attr('disabled', 'disabled');
        $("input[name=check_lang]:checked").removeAttr('disabled');
    }else{
         $("input[name=check_lang]").removeAttr('disabled');
    }
});

或此（不工作）

jQuery(function(){
    var max = 1;
    var checkboxes = jQuery('input[type="checkbox"]');

    checkboxes.click(function(){
        var $this = $(this);
        var set = checkboxes.filter('[name="'+ this.name +'"]')
        var current = set.filter(':checked').length;
        return current <= max;
    });
});

Answer 1

如果您有一组只需要选择ONE的项目，那么您应该使用无线电类型而不是复选框。这将照顾你的问题。单选按钮的默认行为是仅允许一个选择中的一个。那你甚至不需要你的JS。

Answer 2

您可以使用此代码段：

如果页面上有多个复选框，则使用name标识复选框
它为您提供type=radio效果

$("input:checkbox").on('click', function() {
  var $checkbox = $(this);
  if ($checkbox.is(":checked")) {
    var more = "input:checkbox[name='" + $checkbox.attr("name") + "']";
    $(more).prop("checked", false);
    $checkbox.prop("checked", true);
  } else {
    $checkbox.prop("checked", false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Checkboxes with Radio-Effect</p>
  <label>
    <input type="checkbox" name="checkbox" />Check 1</label>
  <label>
    <input type="checkbox" name="checkbox" />Check 2</label>
  <label>
    <input type="checkbox" name="checkbox" />Check 3</label>
</div>

最小 - 最大选择 - 复选框

2 个答案: