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

Question

如何使用 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

这里是示例，但我希望在 Html 或 Php 中使用相同的内容

http://gravitywiz.com/demos/limit-how-many-checkboxes-can-be-checked/

问题已解决，这里是最终解决方案

<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" />

Answer 1

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

Working Example

Answer 2

如果禁用，用户在第一次选择后不能更改他的选择。 这是复选框的单选按钮行为。

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

}); 

http://jsfiddle.net/BxF4Y/

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

Answer 3

浏览该页面的源代码会发现他们用来实现该效果的 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>

Answer 4

是的，这是一个旧线程，但是这里没有真正的结论。如果您希望限制用户选中的框的数量，我在我的版本中包含了一个关于复选框应该如何工作的小提琴。

/** 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>

/** 结束 HTML **/

/** BEGIN JS **/

$('.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);
    });
  }
});

/** 结束 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;
}

http://jsfiddle.net/defmetalhead/9BYrm/1/