пользовательский jQuery checkbox разрешает только один выбор

Question

Итак, первое, что я сделал, это своп из всех экземпляров: checkbox с 'radio' все еще не получил эффекта. Я хочу сохранить «галочку» и пользовательский фон из коробки и т.д., что этот скрипт 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)); 

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> 

Для скрипачей здесь .. вот демонстрация голой кости. просто представьте, что изображения «check markup» показывались при выборе/фокусировке. (Я действительно не хочу их сохранять и размещать где-то в этом демо).

http://jsfiddle.net/gckuX/20/

Answer 1

Вы можете сбросить все другие элементов, чем проверка тока как:

//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"); 
     } 
    }); 

Демо: http://jsfiddle.net/za65p07x/

Answer 2

ваши радиокнопки должны иметь ту же группу/имя только один, чтобы выбрать. в противном случае они будут индивидуальными кнопками - как в стороне. поля ввода должны быть закрыты в конце и не должны находиться внутри метки метки. как вы можете использовать for = "" внутри отдельной метки.

<input type="radio" name="button" value="1"/> 
 
<input type="radio" name="button" value="2"/>

Однако работать с флажком вам потребуется JavaScript/JQuery, чтобы удалить 'проверил' атрибут

$("document").ready(function(){ 
 
    $('input[data-name="check"]').click(function(e){ 
 
    var isChecked = $(this).is(":checked"); 
 
    $('input[data-name="check"]').removeAttr("checked"); 
 
    $(this).prop("checked", isChecked); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input type="checkbox" data-name="check" value="1"/> 
 
<input type="checkbox" data-name="check" value="2"/>