Javascript 自定义jQuery复选框只允许一个选择

所以，我做的第一件事就是用“

radio

”替换掉所有实例：

checkbox

，但仍然没有达到我的效果。。我想保留这个jQuery脚本允许的“复选标记”和框的自定义背景等，一切都很完美，我只需要确保只能选中一项

第一名，jQuery..

/*! custom-checkbox - v1.0.1  */
(function ($) {

    $.fn.customCheckbox = function() {

        return this.each( function(i,v) {

            //Ensure that a checkbox element was passed
            if ( !$(v).is(':checkbox') ) {
                return false;         
            }

            //Add classes
            $(v).addClass("custom-checkbox");

            //If not wrapped within label tags, wrap it
            var parentLabel = $(v).parent("label");
            var withinLabel = parentLabel.length;

            if ( !withinLabel ){
                $(v).wrap("<label class='custom-checkbox-label'></label>");      
            }  
            else {
                parentLabel.addClass('custom-checkbox-label');
            }

            //Create dummy checkbox
            var dummy = $("<span class='custom-checkbox-display'></span>");
            $(v).after(dummy);
            if ( $(v).prop("checked") ) {
                $(v).next('.custom-checkbox-display').addClass("checked");
            }

            //Add/remove classes to checkbox whenever state changes
            $(v).change( function(e) {
                var checkbox = $(e.currentTarget);
                var state = checkbox.prop("checked");
                if ( state ) {
                    dummy.addClass("checked");
                }
                else {
                    dummy.removeClass("checked");
                }
            });

            //Make reset button aware of the custom checkboxes
            var form = $(v).parents("form");
            var reset = form.find("input[type='reset']");
            reset.each( function(ri,rv) {
                if ( !$(rv).hasClass("custom-checkbox-aware") ) {
                    $(rv).addClass("custom-checkbox-aware");
                    $(rv).click( function() {
                        form.find(".custom-checkbox:checked").trigger("click");
                    });
                }
            });

        });

    };

}(jQuery));

/*！自定义复选框-v1.0.1*/
（函数（$）{
$.fn.customCheckbox=函数（）{
返回此。每个函数（i，v）{
//确保传递了checkbox元素
如果（！$（v）.is（'：复选框'））{
返回false；
}
//添加类
$（v）.addClass（“自定义复选框”）；
//如果未包装在标签标签内，请将其包装
var parentLabel=$（v）.parent（“label”）；
var withinLabel=parentLabel.length；
如果（！withinLabel）{
$（v）.换行（“”）；
}  
否则{
parentLabel.addClass（'custom-checkbox-label'）；
}
//创建虚拟复选框
虚拟变量=$（“”）；
$（v）.之后（虚拟）；
如果（$（v）.prop（“选中”））{
$（v）.next（'.custom checkbox display'）.addClass（“checked”）；
}
//每当状态更改时，将类添加/删除到复选框
$（五）改变（职能（e）{
var复选框=$（e.currentTarget）；
var state=checkbox.prop（“选中”）；
如果（州）{
dummy.addClass（“已检查”）；
}
否则{
dummy.removeClass（“选中”）；
}
});
//使“重置”按钮了解自定义复选框
变量形式=$（v）.父母（“形式”）；
var reset=form.find（“输入[type='reset']”）；
复位。每个（功能（ri、rv）{
if（！$（rv）.hasClass（“自定义复选框识别”））{
$（rv）.addClass（“自定义复选框感知”）；
$（rv）。单击（函数（）{
form.find（“.custom checkbox:checked”）.trigger（“click”）；
});
}
});
});
};
}（jQuery））；

html表单标记

  <div class="form-group_district">
    <p class="label">District Name*</p><br>
            <label class="labeldistrict">
            <input type="checkbox" name="NYCDistrictName" class="checkboxed" required >
            I teach in the New York City Department of Education</label><br>
            <label class="labeldistrict">
            <input type="checkbox" name="ChiDistrictName" class="checkboxed" required >
            I teach in the Chicago Public Schools</label><br>
            <label class="labeldistrict"> 
            <input type="checkbox" name="LADistrictName" class="checkboxed" required >
            I teach in the Los Angeles Unified School District</label><br>
            <label class="labeldistrict">
            <input type="checkbox" name="othDistrictName" class="checkboxed" required >
            Other</label><br>               
            <input  type="text" name="othDistrictName" maxlength="100" class="otherdistrict" required ><br>
            <br>
    </div>

地区名称*


我在纽约市教育部教书

我在芝加哥公立学校教书

我在洛杉矶联合学区教书

其他

对于那些小提琴手来说。。这里是一个赤裸裸的演示。想象一下“检查标记”图像显示在选择/焦点上。（我真的不想保存它们并将它们放在某个地方用于演示）

---

您的单选按钮需要具有相同的组/名称，才能选择一个。否则，它们将是单独的按钮-作为旁白。输入字段应在末尾自行关闭，不需要位于标签标记内。您可以在单独的标签内使用for=”“

---

您可以重置除检查电流外的所有其他元件，如：

    //Add/remove classes to checkbox whenever state changes
    $(v).change( function(e) {

        $('input[type="checkbox"].custom-checkbox:checked').not(v).prop("checked", false);
        $('.custom-checkbox-display.checked').not(dummy).removeClass("checked");

        var checkbox = $(e.currentTarget);
        var state = checkbox.prop("checked");
        if ( state ) {
            dummy.addClass("checked");
        }
        else {
            dummy.removeClass("checked");
        }
    });

---

演示：

非常感谢您的输入和回答，但这与我的代码不符..呸！非常感谢！