Create a global jQuery function to be used by multiple controls

Question

I have multiple controls, different types of controls which has same behavior. how can I use a single function to reuse the same behavior. Right now I have a function for each of them. This function works properly but I want to find a way if we can replace the function with a global function and reuse it.

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


        }

});

Is there a way I can create a single function and reuse the same function by each of the control?

Answer 1

I guess this way it works

$( ".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

Some may argue that attaching functions to the global window object could be in odd taste, but it's effectively the same as a global function.

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

Then you can execute this function when the DOM is ready:

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

Answer 3

I did a solution's example for your problem. If you prefer I putted it in JSBin

Given that you have this 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>

Just put this Javascript that everything will work:

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

I changed the event from click to change because it doesn't matter if you click on the input or on the label. I also wrapped it in a div element but this no matter, you can wrap it in another HTML element as well.

Sorry my English, if I did some English mistakes, please, feel free to re-write and improve it.