CODEWITHSUNDEEP
javascripthtmldisabled-input
Mark harris
Mark harris

Reputation: 543

HTML / Javascript: On Click Enable/UnDisable Input Fields?

I have the following HTML input boxes:

<form>
<input type="text" name="1" id="1" disabled>
<input type="text" name="2" id="2" disabled>
<input type="text" name="3" id="3" disabled>
<input type="text" name="4" id="4" disabled>
<input type="submit" name="submit" value="submit>
</form>

Next I am trying to use javascript to undisable all my input boxes upon a user clicking my div.

JavaScript:

<script>
    $('#edit').click(function(){
        $('input[]').prop('disabled', false);
});
</script>

Can someone please show me where I am going wrong, thanks

Upvotes: 2

Views: 1114

Answers (5)

user2575725
user2575725

Reputation:

Try this:

 $('input:text').prop('disabled', false);

Or

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

Upvotes: 1

Junaid Ahmed
Junaid Ahmed

Reputation: 695

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');

Upvotes: 0

R4nc1d
R4nc1d

Reputation: 3123

Check the fiddle

 $('#edit').click(function(){
        $('input').prop('disabled', false);
 });

You can also use the removeAttr and the attr to add and remove the disabled

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

Upvotes: 1

MaThar Beevi
MaThar Beevi

Reputation: 304

Try this:

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $('#edit').click(function(){ 
        $("input").prop('disabled', false);
});
});
</script>
<form>
<input type="text" name="1" id="1" disabled>
<input type="text" name="2" id="2" disabled>
<input type="text" name="3" id="3" disabled>
<input type="text" name="4" id="4" disabled>
<input type="submit" name="submit" value="submit">
</form>
<div id="edit">Click to Enable</div>

whenever using jquery coding before you must write $(document).ready(function(){})

Upvotes: 3

josedefreitasc
josedefreitasc

Reputation: 221

The error is the selector, try:

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

Upvotes: 5

Related Questions