CODEWITHSUNDEEP
jqueryformsinputdisabled-input
Airikr
Airikr

Reputation: 6436

Keep disabled fields disabled after enable the others

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

Upvotes: 0

Views: 312

Answers (3)

Terry
Terry

Reputation: 66103

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">

Upvotes: 2

ADyson
ADyson

Reputation: 61849

You need some other way to distinguish the fields which can never be enabled, since the simple attribute of being disabled isn't sufficient to identify them once all the others are disabled.

Assuming you know in advance which fields these will be, the easiest way is probably to give them all the same class, e.g. always-disabled.

Then when you're enabling your fields, you can exclude them from the list that you loop through to enable:

var fields = $('input,textarea,select,[type="file"]').filter(':not(.always-disabled)');

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

You can keep ref to not disabled fields by default by setting varibale outside disable_fields() function:

var fields = $('input,textarea,select,[type="file"]').filter(':not([disabled])');

-jsFiddle-

Upvotes: 1

Related Questions