How to Disable an Input Type=Text

How to disable an input type=text?

If you know this when the page is rendered, which it sounds like you do because the database has a value, it's better to disable it when rendered instead of JavaScript. To do that, just add the readonly attribute (or disabled, if you want to remove it from the form submission as well) to the <input>, like this:

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

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

Disabling text field by Javascript

It looks like you're disabling the checkbox instead of the textbox. Change the code from:

function disable_input_field(value){     
    if ($("#undefined_" + value).is(":checked")) {       
        document.getElementById("undefined_" + value).disabled = true;       
        document.getElementById(value).value = '??';     
    }else{      
        $("#" + value ).prop("disabled", false);        
        document.getElementById(value).value = '';     
    } 

to:

function disable_input_field(value){     
    if ($("#undefined_" + value).is(":checked")) {       
        document.getElementById("#" + value + "_value").disabled = true;       
        document.getElementById(value).value = '??';     
    }else{      
        $("#" + value + "_value" ).prop("disabled", false);        
        document.getElementById(value).value = '';     
    } 

how to disable input text on condition

You can do something similar to this. The disabletext represents the text to match to disable and disablefieldids is the list of comma seperated value which contain id of the field to disable.

 $('input').on('change', function() {
                var conditions = $(this).data();
                var inputValue = $(this).val();

                if(inputValue == conditions.disabletext) {
                    conditions.disablefieldids.split(",").map(function(id) {
                        $('#'+id).attr('disabled', 'disabled');
                    })
                }else {
                    conditions.disablefieldids.split(",").map(function(id) {
                        $('#'+id).removeAttr('disabled');
                    })
                }
                  
                  
            })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
          <tr>
            <td>
                <input type="text" data-disabletext="test" data-disablefieldids="HGB,RBC"  name="WBC"size ="3" />
            </td>
           <td><input type="text" id="HGB" name="HGB"size ="3" /></td>
           <td> <input type="text" id="RBC" name="RBC" size ="3" value=""/></td>
            <td><input type="text" id="Lymph" name="Lymph"size ="3"/></td>
            <td><input type="text" id="MCV" name="MCV" size ="3"/></td>
            <td><input type="text" id="Gran" name="Gran" size ="3"/></td>
            <td> <input type="text" id="MCH" name="MCH" size ="3"/> </td>
          </tr>

</table>

Prevent typing in Text Field Input, Even Though Field is NOT Disabled/Read-Only

See this fiddle

You can use jQuery for this.. You can do it as below

$('input').keypress(function(e) {
    e.preventDefault();
});

OR

you can just return false instead of using preventDefault(). See the script below

$('input').keypress(function(e) {
    return false
});

See the fiddle

OR

A much simplified version without Javascript would be as below. Just change your HTML as below

<input type="text" onkeypress="return false;"/>

See the fiddle

disable editing default value of text input

You can either use the readonly or the disabled attribute. Note that when disabled, the input's value will not be submitted when submitting the form.

<input id="price_to" value="price to" readonly="readonly">
<input id="price_to" value="price to" disabled="disabled">

Enable and Disable input field using Javascript

Your buttons are submitting the form the are in, to not submit the form you'll have to use a type="button" button, also you've spelt getElementByID incorrectly its getElementById

<form>
    <table>
        <tr>
            <td><input id="input1" class="myText" type="text" placeholder="Row 1" /></td>
            <td><input id="input2" class="myText" type="text" placeholder="Row 1" /></td>
            <td><button type="button" onclick="toggleEnable('input1','input2')"> Enable/Disable </button></td>
        </tr>
        <tr>
            <td><input id="input3" class="myText" type="text" placeholder="Row 3" /></td>
            <td><input id="input4" class="myText" type="text" placeholder="Row 4" /></td>
            <td><button type="button" onclick="toggleEnable('input3','input4')"> Enable/Disable </button></td>
        </tr>
    </table>
</form>

    function toggleEnable(el1, el2) {
        document.getElementById(el1).disabled = true;
        document.getElementById(el2).disabled = true;
    }

http://jsfiddle.net/mowglisanu/aam7jg9t/

Disable Angular 5 Input fields correct way

You can change the assignment of the variable to a setter method so that you'd have:

set isDisabled(value: boolean) {
 this._isDisabled = value;
 if(value) {
  this.form.controls['name'].disable();
 } else {
    this.form.controls['name'].enable();
  }
}

Enable and disable input field with select

You have used the same ID for both the fields.

Use 2 different Ids and it works..

function check(elem) {    document.getElementById('company1').disabled = !elem.selectedIndex;    document.getElementById('company2').disabled = !elem.selectedIndex;}

<form>  <select id="mySelect" onChange="check(this);">   <option>No</option>   <option>Yes</option>  </select>
  <input type="text" id="company1" disabled="disabled" placeholder="CVR number">  <input type="text" id="company2" disabled="disabled" placeholder="Telephone"></form>

---

Related Topics