Создайте глобальную функцию jQuery, которая будет использоваться несколькими элементами управления

Question

У меня есть несколько элементов управления, различные типы элементов управления, которые имеют одинаковое поведение. Как я могу использовать одну функцию для повторного использования такого же поведения. Сейчас у меня есть функция для каждого из них. Эта функция работает правильно, но я хочу найти способ, если мы сможем заменить функцию глобальной функцией и повторно ее использовать.

$(document).ready(function() { 

    var threechecked = false; 
    var fourchecked = false; 

    $('#<%=CheckBoxList1.ClientID%> input:checkbox').click(function() { 

     var currentIdone = 'Unknown'; 
     var currentId = $(this).next().html(); 
     if (currentId == currentIdone) { 

      if (threechecked) { 

       $("#<%=CheckBoxList1.ClientID%> input").removeAttr('disabled'); 
       threechecked = false; 
       return; 
      } 
      else { 
       $("#<%=CheckBoxList1.ClientID%> input").attr('checked', false); 
       $(this).attr('checked', true); 
       $('#<%=CheckBoxList1.ClientID%> input:not(:checked)').attr('disabled', 'disabled'); 
       threechecked = true; 
      } 


     } 

    }); 


    $('#<%=CheckBoxList2.ClientID%> input:checkbox').click(function() { 


     var currentIdone = 'Unknown'; 
     var currentId = $(this).next().html(); 
     if (currentId == currentIdone) { 

      if (fourchecked) { 

       $("#<%=CheckBoxList2.ClientID%> input").removeAttr('disabled'); 
       checked = false; 
       return; 
      } 
      else { 
       $("#<%=CheckBoxList2.ClientID%> input").attr('checked', false); 
       $(this).attr('checked', true); 
       $('#<%=CheckBoxList2.ClientID%> input:not(:checked)').attr('disabled', 'disabled'); 
       fourchecked = true; 
      } 


     } 

}); 

Есть ли способ создать единую функцию и повторно использовать одну и ту же функцию каждым из элементов управления?

Answer 1

Я предполагаю, что это, как он работает

$(".unknownSelectable input").change(function(event){ 

    var labelSelected = $(this).next().html(); 

    if (labelSelected == "Unknown") { 
    var $siblings = $(this).siblings("input[type='checkbox']"); 

    if($(this).is(":checked")) 
    { 
     $siblings.prop("checked", false); 
     $siblings.attr("disabled", "disabled");  
    } 
    else{ 
     $siblings.removeAttr("disabled"); 
    } 

    } 

}); 

JSBin

Answer 2

Некоторые могут утверждать, что присоединение функций к глобальному объекту window может иметь нечетный вкус, но это фактически то же самое, что и глобальная функция.

window.foo = function() { 
    /* Your code here */ 
}; 

Затем вы можете выполнить эту функцию, когда DOM готов:

$(document).ready(window.foo); 

Answer 3

я сделал, например, раствор для вашей проблемы. Если вы предпочитаете я гнал его в JSBin

Учитывая, что у вас есть этот HTML:

<div class="unknownSelectable"> 
    <input type="checkbox" value="0" name="Anything" id="Anything1" /> 
    <label for="Anything1">Unknown</label> 
    <input type="checkbox" value="0" name="Anything" id="Anything2" /> 
    <label for="Anything2">Label 1</label> 
    <input type="checkbox" value="0" name="Anything" id="Anything3" /> 
    <label for="Anything3">Label 2</label> 
    <input type="checkbox" value="0" name="Anything" id="Anything4" /> 
    <label for="Anything4">Label 3</label> 
</div> 
<h1>Select</h1> 
<div class="unknownSelectable"> 
    <input type="checkbox" value="0" name="AnotherAnything" id="AnotherAnything1" /> 
    <label for="AnotherAnything1">Unknown</label> 
    <input type="checkbox" value="0" name="AnotherAnything" id="AnotherAnything2" /> 
    <label for="AnotherAnything2">Label 1</label> 
    <input type="checkbox" value="0" name="AnotherAnything" id="AnotherAnything3" /> 
    <label for="AnotherAnything3">Label 2</label> 
    <input type="checkbox" value="0" name="AnotherAnything" id="AnotherAnything4" /> 
    <label for="AnotherAnything4">Label 3</label>  
</div> 

Просто поставить этот Javascript, что все будет работать:

$(".unknownSelectable input").change(function(event){ 

    var labelSelected = $(this).next().html(); 

    if (labelSelected == "Unknown") { 
    var $siblings = $(this).siblings("input[type='checkbox']"); 

    if($(this).is(":checked")) 
     $siblings.prop("checked", false); 
    else 
     $siblings.prop("checked", true); 

    } 

}); 

Я изменил событие от мыши для изменения потому что неважно, нажимаете ли вы на ввод или на этикетке. Я также обернул его в элементе div, но это неважно, вы можете его обернуть и в другой элемент HTML.

Извините, мой английский, если я допустил некоторые ошибки на английском языке, пожалуйста, не стесняйтесь переписывать и совершенствовать его.