Keep disabled fields disabled after enable the others

Question

I want to disable all fields in a form and after that, enable only those who has been enabled before. But when I try to do that, all fields (including the pre-disabled fields) will be enabled.

$('body').on('click', 'input[type="button"]', function() {
    disable_fields(true);

    setTimeout(function() {
        disable_fields(false);
    }, 1000);
});

function disable_fields(t) {
    var fields = $('input,textarea,select,[type="file"]');

    fields.each(function(index, element) {
        if($(this).is(':disabled')) {
            is_disabled = true;
        }

        console.log(fields.attr('name')+' - '+is_disabled);
        $(this).prop('disabled', t);
        console.log(fields.attr('name')+' - '+is_disabled);
    });
}

How can I accomplish this?

jsFiddle

Answer 1

As per my comment—once you start modifying the disabled property, there is no sure way of knowing which input element has been originally disabled. To do so, you will have to store the "original" disabled status in some kind of data structure, such as the data() object of the element in jQuery. I chose not to store it as the HTML5 data attribute so users cannot easily manipulate the behaviour by modifying the markup.

The advantage of this approach, even though it appears rather convoluted, is that you reserve the option to manually update which fields you want to revoke/reinstate the disable toggle at a later stage, by simply modifying the .data('disabled') attribute of the input elements.

The strategy:

1. Store the disabled states of all input elements on page load
2. When executing disable_fields(), only filter the input elements whose original disabled status is false. We don't have to touch the elements that are already disabled originally.

$(document).ready(function() {

  // Store the original disabled status of all input elements
  var $fields = $('input,textarea,select,[type="file"]');
  $fields.each(function() {
    $(this).data('disabled', $(this).prop('disabled'));
  });

  $('body').on('click', 'input[type="button"]', function() {
    disable_fields(true);

    setTimeout(function() {
      disable_fields(false);
    }, 1000);
  });

  function disable_fields(t) {
    // Perform toggling only on fields that have data attribute of disabled set to false
    // i.e. not disabled on page load
    $fields.filter(function() {
      return !$(this).data('disabled');
    }).prop('disabled', t);
  }

});

input[name="first"] {
  width: 250px;
}
input[name="second"] {
  width: 90px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="first" value="Disabled (and will keep being disabled)" disabled>
<input type="text" name="second" value="Not disabled">
<input type="button" name="button" value="Button">