CODEWITHSUNDEEP
javascriptjquery
Eladerezador
Eladerezador

Reputation: 1311

How to disable all form fields except the selected one

When I use the keyup event of jQuery about a field, I want to disable all fields unless the field that I am accessing, also, if my field is empty, all the form fields must be enabled.

This is html code:

<form id="myform">
    <div class="form-group col-xs-4 col-md-4">
        <label for="customernumber" class="control-label">Customer Number</label>
        <input type="number" class="form-control" id="customer-number" />
    </div>
    <div class="form-group col-xs-5 col-md-5">
        <label for="surname" class="control-label">Surname</label>
        <input type="text" class="form-control" id="surname" />
    </div>
    <div class="form-group col-xs-2 col-md-2">
        <label for="datebirth" class="control-label">Date of Birth</label>
        <div class='input-group date' id="datetimepicker1">
            <input type='text' class="form-control" id="date-birth" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>                      
    </div>
</form>

This is js code:

$("#customer-number").keyup(function() {
    $("#myform :input").prop("disabled", true);
})

How could do it?

Thanks,

Upvotes: 2

Views: 3079

Answers (3)

Divesh Oswal
Divesh Oswal

Reputation: 250

Like this you are looking for..? If it is empty it should not get disabled. otherwise it should...

$("#myform :input").keyup(function() {
    $("#myform :input").each(function(){
      if($(this).val() !== ''){
      $(this).prop("disabled", true);
      }
      
    });
  $(this).prop("disabled",false);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
    <div class="form-group col-xs-4 col-md-4">
        <label for="customernumber" class="control-label">Customer Number</label>
        <input type="number" class="form-control" id="customer-number" />
    </div>
    <div class="form-group col-xs-5 col-md-5">
        <label for="surname" class="control-label">Surname</label>
        <input type="text" class="form-control" id="surname" />
    </div>
    <div class="form-group col-xs-2 col-md-2">
        <label for="datebirth" class="control-label">Date of Birth</label>
        <div class='input-group date' id="datetimepicker1">
            <input type='text' class="form-control" id="date-birth" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>                      
    </div>
</form>

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241188

If you want to negate the input element that current has focus, you could either use the selector $("#myform :input:not(:focus)") or $("#myform :input").not(this).

In addition, if you also want to disable the other fields based on whether the current input element has a value, set the disabled property based on the length of the current element's value:

Example Here

$("#customer-number").on('input', function() {
    $("#myform :input:not(:focus)").prop("disabled", this.value.length);
});

I also changed the keyup event to an input event so that the event is fired whenever the value changes rather than whenever the key is up.

Upvotes: 3

Swiffy
Swiffy

Reputation: 4693

This is one way:

$("#customer-number").keyup(function() 
{
    $("#myform input").each(function()
    {
        $(this).prop("disabled", true);
    });
});

Each function goes through all inputs in #myform and $(this) inside the each function refers to the current element being looped through.

Upvotes: 0

Related Questions