CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Shry Vishnu Murugesan
Shry Vishnu Murugesan

Reputation: 41

How to enable form fields with a JQuery function

I am setting up a form with 11 rows 11 columns. Normally the form rows and columns should be disabled but when i click a button called "EDIT" it should enable all the form fields. It would be nice if someone help me in this case. thanks in advance

my edit button : 

<table class="auto-style15" style="width: 100%; height: 100%;">
<tr>
    <td class="auto-style11" rowspan="2" style="width: 70px"><strong>Operation No</strong></td>
    <td class="auto-style22" rowspan="2" style="width: 156px"><strong>Fixture No</strong></td>
    <td class="auto-style22" rowspan="2" style="width: 55px"><strong>Rev</strong></td>
    <td class="auto-style22" colspan="5"><strong>Status</strong></td>
    <td class="auto-style22" rowspan="2" style="width: 59px"><strong>Storage</strong></td>
    <td class="auto-style22" rowspan="2" style="width: 42px"><strong>ChecksTo Be<br />
    Done</strong></td>
    <td class="auto-style22" rowspan="2" style="width: 154px"><strong>Remarks</strong></td>
</tr>
<tr>
    <td class="auto-style7" style="width: 70px; height: 25px">
    <input name="oprno1" type="text" style="width: 70px" /></td>
    <td class="auto-style7" style="height: 25px; width: 156px">
    <input name="fixno1" style="width: 150px" type="text" /></td>
    <td class="auto-style7" style="height: 25px; width: 55px">
    <input name="rev1" style="width: 50px" type="text" /></td>

<input name="Button1" type="button" value="EDIT" disabled class="auto-style12" />

Upvotes: 0

Views: 273

Answers (3)

GoE
GoE

Reputation: 596

<strong>
<input name="Button1" type="button" value="EDIT" disabled class="auto-style12" />
<script>
$('.auto-style12').click(function(){
    $('#textfield-id').removeAttr('disabled');
})
</script>

with jQuery

Upvotes: 0

AfromanJ
AfromanJ

Reputation: 3932

jQuery 1.6+

You can enable the fields by setting .prop('disabled', false);.

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

jQuery 1.5 and below

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

The function

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

You can target input and textarea fields within your table and give it a class or ID.

$('table#edit input, table#edit textarea').prop('disabled', false);

Demo

Upvotes: 0

Elvis Lima
Elvis Lima

Reputation: 144

If I understand right what you want, is to enable or disable controls on a form ... This issue has been debated here and it was answered. Kindly see if it is what you need.

http://jsfiddle.net/vGc5P/1/ 

$().ready(function() {


$('#clicker').click(function() {
    $('input').each(function() {
        if ($(this).attr('disabled')) {
            $(this).removeAttr('disabled');
        }
        else {
            $(this).attr({
                'disabled': 'disabled'
            });
        }
    });
});

});

Question Script to enable/disable input elements?

Upvotes: 1

Related Questions