How To Run A Function For More Id's?

I want to disable the previous button in a form, when the user checked some options. So if he select for ID 1 OR 2 OR 3 the previous button must be disabled. But if the user checke

Solution 1:

You have to consider all checkboxes (this code can still be optimized):

let ids = ["1", "2", "3"];
$.each(ids, function( index, mainOption ) {
    $('#option_'+mainOption).change(function(){
        if($(this).prop('checked')){
            $('#previous_button').prop('disabled', true);
        } else {
            let cnt = 0;
            $.each(ids, function( index, mainOption ) {
                if ($('#option_'+mainOption).prop('checked')) {
                    cnt++;
                }
            })
            if (cnt === 0) {
                $('#previous_button').prop('disabled', false);
            }
        }
    });
});

Solution 2:

You could use event delegation mechanism and register your listener on the first common ancestor and apply disabled property to the previous button whether one or more checkboxes have been checked or not.

// The function used to filter eligible checkboxes// to be passed to jQuery "filter" function belowlet myFilter = function (i, el) {
  // Only include checkboxes whose id matches the following patternreturn/-[12]$/.test(el.id)
}

// Register click event on the first common ancestor
$('form').on('click', function(e) {
  let $form = $(this), $target = $(e.target);

  // If a checkbox get clickedif ($target.is('input[type="checkbox"]')) {
    let shouldDisable = !!$form.find('input:checked').filter(myFilter).length;
    $form.find('button').prop('disabled', shouldDisable);
  }
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><h2>Select one or more items</h2><labelfor="checkbox-1">Checkbox 1</label><inputtype="checkbox"id="checkbox-1"name="checkbox" /><labelfor="checkbox-2">Checkbox 2</label><inputtype="checkbox"id="checkbox-2"name="checkbox" /><labelfor="checkbox-3">Checkbox 3</label><inputtype="checkbox"id="checkbox-3"name="checkbox" /><br /><buttontype="button">Prev</button></form>

Which applied to your markup gives:

let myFilter = function(i, el) {
  return/_[12]$/.test(el.id)
}
$('ul').on('click', function(e) {
  let $ul = $(this),
    $target = $(e.target);

  if ($target.is('input[type="checkbox"]')) {
    let shouldDisable = !!$ul.find('input:checked').filter(myFilter).length;
    $ul.next().prop('disabled', shouldDisable);
  }
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulclass="checkbox"><liclass="option_1"><inputname="input_1"type="checkbox"value="option1"id="option_1"><label>Option 1</label></li><liclass="option_2"><inputname="input_2"type="checkbox"value="option2"id="option_2"><label>Option 2</label></li><liclass="option_3"><inputname="input_3"type="checkbox"value="option3"id="option_3"><label>Option 3</label></li></ul><inputtype="button"id="previous_button"class="previous_button button"value="Back">