如何使用jquery或javascript将复选框选择限制为一个

如何使用jquery或javascript将复选框选择限制为一个复选框，并且在选中一个复选框后应禁用其他复选框

<input type="checkbox" name="size[]" id="size" value="Small" />Small
<input type="checkbox" name="size[]" id="size" value="Medium" />Medium
<input type="checkbox" name="size[]" id="size" value="Large" />Large
<input type="checkbox" name="size[]" id="size" value="Xl" />XL

问题现在解决了，这里是最终解决方案

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true); 
}else{
$inputs.prop('disabled',false);
}
})
})
</script>

<input type="checkbox">
<input type="checkbox"> 
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" />

$（文档）.ready（函数（）{
$（'input:checkbox'）。单击（函数（）{
变量$inputs=$（'input:checkbox'）
如果（$（this）.is（':checked'））{
$inputs.not（this.prop（'disabled'，true））；
}否则{
$inputs.prop（'disabled'，false）；
}
})
})

---

若禁用，用户在第一次选择后无法更改其选择。 下面是复选框的单选按钮行为

$("input[type=checkbox]").on('click', function() {   
    $("input[type=checkbox]").not(this).attr('checked', false);  

}); 

---

但要做到这一点，最好的方法是使用单选按钮

浏览该页面的源代码可以发现他们用来实现这种效果的jQuery。您应该能够将checkboxLimit更改为1

<script type="text/javascript">
jQuery(document).ready(function($) {

    $.fn.checkboxLimit = function(n) {

        var checkboxes = this;

        this.toggleDisable = function() {

            // if we have reached or exceeded the limit, disable all other checkboxes
            if(this.filter(':checked').length >= n) {
                var unchecked = this.not(':checked');
                unchecked.prop('disabled', true);
            }
            // if we are below the limit, make sure all checkboxes are available
            else {
                this.prop('disabled', false);
            }

        }

        // when form is rendered, toggle disable
        checkboxes.bind('gform_post_render', checkboxes.toggleDisable());

        // when checkbox is clicked, toggle disable
        checkboxes.click(function(event) {

            checkboxes.toggleDisable();

            // if we are equal to or below the limit, the field should be checked
            return checkboxes.filter(':checked').length <= n;
        });

    }


        $("#field_11_1 .gfield_checkbox input:checkbox").checkboxLimit(3);


});
</script>

jQuery（文档）.ready（函数（$）{
$.fn.checkboxLimit=函数（n）{
var复选框=此；
this.toggleDisable=函数（）{
//如果已达到或超过限制，请禁用所有其他复选框
if（此.filter（':checked'）。长度>=n）{
var unchecked=this.not（“：checked”）；
未选中。prop（'disabled'，true）；
}
//如果我们低于限制，请确保所有复选框都可用
否则{
此.prop（'disabled'，false）；
}
}
//渲染窗体时，切换“禁用”
checkbox.bind（'gform_post_render'，checkbox.toggleDisable（））；
//单击复选框时，切换禁用
复选框。单击（功能（事件）{
复选框。toggleDisable（）；
//如果我们等于或低于该限制，则应检查该字段
返回复选框。过滤器（“：checked”）。长度是的，这是一个旧线程，但是这里没有真正的结论。如果您希望限制用户选中的框的数量，我已经包含了一个关于复选框应如何工作的版本

/** Begin HTML **/
<div class="cContainer">
<div class="cDropdown">
    <div class="downArrow"></div>
    <h4>Night Life</h4>
</div>
<div class="multiCheckboxes stick">
    <input id="1" class="stick" type="checkbox" value="1" name="l-28">
    <label class="stick" for="1">Dive Bar</label>
    <br>
    <input id="2" class="stick" type="checkbox" value="2" name="l-28">
    <label class="stick" for="2">Pub</label>
    <br>
    <input id="3" class="stick" type="checkbox" value="3" name="l-28">
    <label class="stick" for="3">Dance Club</label>
    <br>
    <input id="4" class="stick" type="checkbox" value="4" name="l-28">
    <label class="stick" for="4">Pool Hall</label>
    <br>
    <input id="5" class="stick" type="checkbox" value="5" name="l-28">
    <label class="stick" for="5">Karaoke</label>
    <br>
    <input id="6" class="stick" type="checkbox" value="6" name="l-28">
    <label class="stick" for="6">Sports Bar</label>
    <br>
    <input id="7" class="stick" type="checkbox" value="7" name="l-28">
    <label class="stick" for="7">Trendy</label>
    <br>                    
</div>

/**结束JS**/

/**开始CSS**/

.cDropdown {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px inset #D3D3D3;
    clear: right;
    padding: 4px 3px;
    width: 150px;
}
.cDropdown h4 {
    font-size: 0.86em;
    font-weight: normal;
    margin: 0 0 0 1px;
    padding: 0;
}
.downArrow {
    border-left: 8px solid rgba(0, 0, 0, 0);
    border-right: 8px solid rgba(0, 0, 0, 0);
    border-top: 8px solid #3C3C3C;
    float: right;
    height: 0;
    margin: 3px 0 0 3px;
    width: 0;
}
.multiCheckboxes {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #3C3C3C;
    display: none;
    left: 9px;
    max-height: 200px;
    overflow: auto;
    padding: 5px;
    position: absolute;
    top: 35px;
    width: 146px;
    z-index: 999;
}

.multiCheckboxes label {
   float: none !important;
    font-size: 0.9em;
    width: 7.6em !important;
}

如果您只想选择一个，为什么不使用单选按钮呢？编辑：what@icancsaid@icanc复选框比收音机好？这并不是说一个比另一个好，它们有不同的用途。你是否开发了一个应用程序来向一些学生展示如何不使用用户体验？！甚至如果取消选中复选框，那么它应该再次启用其他复选框呢xes？@edgematrix当然，让我补充一下。@edgematrix很好，那么你还需要什么或者你准备好了吗？@edgematrix如果这回答了你的问题，请记为正确答案。埃文，这一次你应该得到一个紫心勋章……吉布斯。
/** Begin HTML **/
<div class="cContainer">
<div class="cDropdown">
    <div class="downArrow"></div>
    <h4>Night Life</h4>
</div>
<div class="multiCheckboxes stick">
    <input id="1" class="stick" type="checkbox" value="1" name="l-28">
    <label class="stick" for="1">Dive Bar</label>
    <br>
    <input id="2" class="stick" type="checkbox" value="2" name="l-28">
    <label class="stick" for="2">Pub</label>
    <br>
    <input id="3" class="stick" type="checkbox" value="3" name="l-28">
    <label class="stick" for="3">Dance Club</label>
    <br>
    <input id="4" class="stick" type="checkbox" value="4" name="l-28">
    <label class="stick" for="4">Pool Hall</label>
    <br>
    <input id="5" class="stick" type="checkbox" value="5" name="l-28">
    <label class="stick" for="5">Karaoke</label>
    <br>
    <input id="6" class="stick" type="checkbox" value="6" name="l-28">
    <label class="stick" for="6">Sports Bar</label>
    <br>
    <input id="7" class="stick" type="checkbox" value="7" name="l-28">
    <label class="stick" for="7">Trendy</label>
    <br>                    
</div>

$('.cDropdown').on('click', function (e) {
$('.multiCheckboxes').slideUp(50)
e.stopPropagation();
currentDrop = $(this).next();
currentDrop.stop().slideToggle();
});
$('input:checkbox[name="l-28"]').on('change', function () {
var nightLifeLimit = $('input:checkbox[name="l-28"]:checked').length;
    if (nightLifeLimit == 2) {
    $('input:checkbox[name="l-28"]').each(function () {
        if ($(this).is(':checked')) {
            return;
        }
        else {
            $(this).prop('disabled', true);
        }
    });
}
else {
    $('input:checkbox[name="l-28"]').each(function () {
        $(this).prop('disabled', false);
    });
  }
});

.cDropdown {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px inset #D3D3D3;
    clear: right;
    padding: 4px 3px;
    width: 150px;
}
.cDropdown h4 {
    font-size: 0.86em;
    font-weight: normal;
    margin: 0 0 0 1px;
    padding: 0;
}
.downArrow {
    border-left: 8px solid rgba(0, 0, 0, 0);
    border-right: 8px solid rgba(0, 0, 0, 0);
    border-top: 8px solid #3C3C3C;
    float: right;
    height: 0;
    margin: 3px 0 0 3px;
    width: 0;
}
.multiCheckboxes {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #3C3C3C;
    display: none;
    left: 9px;
    max-height: 200px;
    overflow: auto;
    padding: 5px;
    position: absolute;
    top: 35px;
    width: 146px;
    z-index: 999;
}

.multiCheckboxes label {
   float: none !important;
    font-size: 0.9em;
    width: 7.6em !important;
}