Disable/Enable an Input With Jquery

Disable/enable an input with jQuery?

jQuery 1.6+

To change the disabled property you should use the .prop() function.

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 and below

The .prop() function doesn't exist, but .attr() does similar:

Set the disabled attribute.

$("input").attr('disabled','disabled');

To enable again, the proper method is to use .removeAttr()

$("input").removeAttr('disabled');

In any version of jQuery

You can always rely on the actual DOM object and is probably a little faster than the other two options if you are only dealing with one element:

// assuming an event handler thus 'this'
this.disabled = true;

The advantage to using the .prop() or .attr() methods is that you can set the property for a bunch of selected items.

---

Note: In 1.6 there is a .removeProp() method that sounds a lot like removeAttr(), but it SHOULD NOT BE USED on native properties like 'disabled' Excerpt from the documentation:

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

In fact, I doubt there are many legitimate uses for this method, boolean props are done in such a way that you should set them to false instead of "removing" them like their "attribute" counterparts in 1.5

Enable / Disable input using Jquery

When you delete the content, it doesn't turn into null, it's "". You should add it to your condition, and also use else:

function soluong_nhap()
{
    $('#customers2').find('tr').click( function(){
        var row = $(this).find('#number').val();
        if (row === null || row === "")
        {
            $('#texth').prop("disabled", true);
        }
        else
        {
            $('#texth').prop("disabled", false);
        }
    });
}

jQuery: How to enable/disable button based on input value?

I like to use .on() with jQuery, like so:

$("#InputFName").on("keyup", function() {
  $("#BtnNext").prop("disabled", false);
  if( $("#InputFName").val() == '') {
    $("#BtnNext").prop("disabled", true);
 }
});

Disable/Enable Input when checkbox is clicked jQuery

You can access the checkbox status via this.checked and not $(this).checked. And I recommend using the change event.

$(document).ready(function() {
    $('#waivercheck').change(function(){        
        if(this.checked){
            $('#joinevent').prop("disabled",false);   
        } else {
            $('#joinevent').prop("disabled",true);
        }
    });
});

Demo: https://jsfiddle.net/rbnndz23/

jQuery disable/enable submit button

The problem is that the change event fires only when focus is moved away from the input (e.g. someone clicks off the input or tabs out of it). Try using keyup instead:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

How to properly disable and enable input field by option in HTML & JQUERY

$(document).ready(function() {

  $('#byremaining').prop('disabled', true); //use prop

  $('#plaats').change(function() {

    var selected = $('option:selected', this).attr('id')

    if (selected == 'remaining') { //if selected option is remaining 

      $('#byremaining').prop('disabled', false); //use prop

    } else {

      $('#byremaining').prop('disabled', true); //use prop

    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Sort by:

<select name="plaats" id="plaats">

  <option value="plaats1">plaats1</option>

  <option value="plaats2">plaats2</option>

  <option value="plaats3">plaats3</option>

  <option value="plaats4">plaats4</option>

  <option value="remaining" id="remaining">remaining</option>

</select>

<br/>date range:

<br/>Remaining:

<input type="text" value="" name="byremaining" id="byremaining"></input>

<br/>

Enable/Disable Textbox in jquery

You can achieve this by just setting the disabled property based on whether or not the value of the chosen radio is Y. Try this:

$('input:radio[name="IsLive"]').change(function() {
    $("#LiveDate").prop("disabled", this.value != 'Y');
});

Working example

Note that I removed the :checked condition because it's redundant for a radio button, as to raise a new change event the element must be checked.

How enable or disable inputs uses jQuery based on the value of a select option?

You are nearly there. You can use attr OR prop either one. The only thing you were doing wrong was you are disabling the actual divs but not the input itself. The disable property work only on inputs not the div elements

To disable the actual inputs we can jQuery decendant selector - Also, in your current jQuery code your are missing # selector sign as well.

Edit: Added prop method but you can use attr as well if you are only disabling the inputs

Here is an example of decendant selector

$("#divb > input").prop("disabled", true);
$("#divn > input").prop("disabled", true);

Live Working Code:

$(document).on('change', '#category_id', function() {
  var stateID = $(this).val();
  if (stateID == '2') {
    $("#divb > input").prop("disabled", true);
    $("#divn > input").prop("disabled", true);
  } else {
    $("#divb > input").prop("disabled", false);
    $("#divn > input").prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="form-group">
    <label>Categories <span class="text-hightlight">*</span></label>
    <select class="form-control" name="category_id" id="category_id">
      <option>select</option>
      <option value="1">choose1</option>
      <option value="2">choose2</option>
    </select>
  </div>
  <div class="form-group" id="divb">
    <label>business <span class="text-hightlight">*</span></label>
    <input type="text" name="entreprise" id="entreprise" class="form-control" />
  </div>
  <div class="form-group" id="divn">
    <label>name Piece <span class="text-hightlight">*</span></label>
    <input type="text" name="piece" class="form-control" />
  </div>
</div>

Jquery disable/enable on key press

1. You should check the length of the value in the input, not the input itself.
2. You should bind keyup instead of keypress.

$("#progress-reg").on("keyup", function(){

    var n = this.value.length;

    $("#progress-next").prop("disabled", n < 1 ? true : false);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="progress-reg" /><button id="progress-next" disabled>Next</button>

How to disable an input on change of other inputs (jQuery)

I hope this will work perfectly for you, always remember on is better in this scenario, and you might need to execute it on paste as well

// on input change
$("input").on("change paste keyup", function() {
  var optionsInputHavevalue = $("[id^='option_name']").filter(function() {
    return $(this).val().trim().length > 0 ;
  }).length > 0;
  $("#stock").prop('disabled', optionsInputHavevalue);
}).change();

working bin can be found here.
https://jsbin.com/zojukij/edit?html,js,output

---

Related Topics