How can I disable the HTML textfield using this simple jQuery?

Question

I have this simple jQuery code to test out.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
          $("text").attr("disabled","");
      });
    });
</script>
</head>
<body>
<input type="text">
<br />
<button>Set the textfield disabled</button>
</body>
</html>

Basically the HTML page comes with a simple button and textfield. All I want to have the input field disabled as I click the button. But it doesn't work???

(PS: this code is sourced out from w3schools.com website, just to simply test out how powerful jQuery is)

That explains why W3School isn't appreciated over here. the HTML isn't valid. look at that text element... — gdoron
– gdoron, Commented Jan 27, 2012 at 7:36
@gdoron: What's wrong with the <input type="text"> element? It isn't closed properly? Isn't that valid in HTML5? <input> elements never have content, so it's unambiguous. — mpen
– mpen, Commented Jan 27, 2012 at 8:16
@Mark. Look at my answer. It should be with self closing <input /> like every XML element. — gdoron
– gdoron, Commented Jan 27, 2012 at 9:00
@gdoron: Your answer doesn't explain anything. HTML is not XML (not to be confused with XHTML). It's optional. Read the spec. Or see stackoverflow.com/questions/3008593/… — mpen
– mpen, Commented Jan 28, 2012 at 2:25
@Mark. You're right that but "Smaller devices often lack the resources or power to interpret a "bad" markup language." so it's bad pracitce writing invalid XHTML code. IMO. — gdoron
– gdoron, Commented Jan 28, 2012 at 16:46

xdazz · Accepted Answer · 2012-01-27 07:26:07Z

18

From jQuery 1.7, you could use .prop:

$(document).ready(function(){
  $("button").click(function(){
      $(":text").prop("disabled", true);
  });
});

Before 1.7, you could do:

$(document).ready(function(){
  $("button").click(function(){
      $(":text").attr("disabled", true);
  });
});

PS: Use $(":text") or $('input[type="text"]') to select all elements of type text.

edited Jan 27, 2012 at 7:26

answered Jan 27, 2012 at 7:20

xdazz

161k38 gold badges255 silver badges278 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gdoron · Accepted Answer · 2012-01-27 07:49:39Z

2

Try this:

    <html>   
<head>   
<script type="text/javascript" src="jquery.js"></script>   
<script type="text/javascript">   
$(document).ready(function(){     
$("button").click(function(){         
$("#text").attr("disabled","true");     
});   
});   
</script>   
</head>   
<body>  
 <input id="text" type="text">
<br />
<button>Set the textfield disabled</button>
</body>
</html>

edited Jan 27, 2012 at 7:49

gdoron

151k59 gold badges302 silver badges376 bronze badges

answered Jan 27, 2012 at 7:24

Tapas Mahata

3516 silver badges22 bronze badges

3 Comments

devnull69 Over a year ago

@gdoron Tapas also changed the HTML below

gdoron Over a year ago

@devnull69. But hided it with a poor indent... =)

awongCM Over a year ago

Thanks all. I tested the code above and it works! Just I'm still confused about JQuery since choices for formatting your selector can be varied depending on which JQuery version you start off using... Oh well. You learn something new every day.

devnull69 · Accepted Answer · 2012-01-27 07:22:21Z

1

Or (more modern):

$("input[type=text]").prop('disabled', true);

answered Jan 27, 2012 at 7:22

devnull69

16.6k9 gold badges55 silver badges67 bronze badges

Comments

gdoron · Accepted Answer · 2012-01-30 08:36:35Z

There is not text selector in jquery. You need to use the attribute selector [attribute=value]

$('input[type=text]').prop('disabled', true); // prop Works on jquery 1.7+

or:

$('input[type=text]').attr('disabled', 'disabled'); // Works in each version. 
                                                    // But isn't W3C standard.

there is a :text selector but it's less efficent then the first option, see the docs:

$(':text') is equivalent to $('[type=text]') and thus selects all elements. As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("") is implied. In other words, the bare $(':text') is equivalent to $(':text'), so $('input:text') should be used instead.

Additional Notes: Because :text is a jQuery extension and not part of the CSS specification, queries using :text cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use [type="text"] instead.

Note that your's XHTML isn't valid. You should close the <input type="text"> => <input type="text" />

gabitzish · Accepted Answer · 2012-01-27 07:20:25Z

0

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

answered Jan 27, 2012 at 7:20

gabitzish

9,7117 gold badges47 silver badges67 bronze badges

Comments

mpen · Accepted Answer · 2012-01-27 08:12:57Z

-1

"disabled" is a property, not an attribute per-se. Booleans like "checked" or "disabled" don't always get updated (or retrieved) properly when accessing them that way. Use

$(':text').prop('disabled',true);

instead.

edited Jan 27, 2012 at 8:12

answered Jan 27, 2012 at 7:20

mpen

285k289 gold badges896 silver badges1.3k bronze badges

2 Comments

devnull69 Over a year ago

$('text') is not a valid selector!

mpen Over a year ago

@devnull69: My bad. Thought there was something off about it. :text is though. Updated. I guess I figured he'd have checked if the selector was matching any elements.

Collectives™ on Stack Overflow

How can I disable the HTML textfield using this simple jQuery?

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related