CODEWITHSUNDEEP
jquery
Wern Ancheta
Wern Ancheta

Reputation: 23297

Enable or disable form elements in jquery

How do I properly disable and enable form elements using jquery. I need to disable the text form element when I click on the select. And vise versa. 

<html>
    <head>
    <script src="jq.js"></script>
    <script>

    $(function(){

    $('#fromdate').click(function(){
        $('#yosh').attr('disabled','disabled');
        $('#fromdate').removeAttr('disabled');
    });

    $('#yosh').click(function(){
        $('#yosh').removeAttr('disabled');
        $('#fromdate').attr('disabled','disabled');
    });

    });
    </script>

    </head>
    <body>
    Sort by:
    <select name="yosh" id="yosh">
    <option value="daily">daily</option>
    <option value="weekly">yesterday</option>
    <option value="weekly">weekly</option>
    <option value="monthly">monthly</option>
    <option value="yearly">yearly</option>

    </select><br/>
    date range:<br/>

    From:<input type="text" value="" name="fromdate" id="fromdate"></input><br/>
    To:<input type="text" value="" name="todate" id="todate"></input><br/>


    Customer:<input type="text" value="" name="customer" id="customer"></input>

    </body>

    </html>

Upvotes: 10

Views: 45064

Answers (5)

Sang Suantak
Sang Suantak

Reputation: 5265

Example of what i've written in the comment:

<span id="spnSel">
    <select name="yosh" id="yosh">
        <option value="daily">daily</option>
        <option value="weekly">yesterday</option>
        <option value="weekly">weekly</option>
        <option value="monthly">monthly</option>
        <option value="yearly">yearly</option>
    </select>
</span>

Add this event:

$('#spnSel').mouseover(function () {
   $('#yosh').prop('disabled', false);
});

You can do this for the text boxes as well. This may not be the best solution/approach but it will do the job.

Upvotes: 19

Joko Wandiro
Joko Wandiro

Reputation: 1987

I test your code and i have conclusion that you can't add event while element is disabled, so you have to use trigger...

DEMO

Upvotes: 0

Warren Stevens
Warren Stevens

Reputation: 29

$('#fromdate').disabled = false

Upvotes: -1

Vivek
Vivek

Reputation: 11028

look at this... 

<script>

    $(function(){

    $('#fromdate').click(function(){
        $('#yosh').attr('disabled',true);
        $('#fromdate').removeAttr('disabled');
    });

    $('#yosh').click(function(){
        $('#yosh').removeAttr('disabled');
        $('#fromdate').attr('disabled',true);
    });

    });
    </script>

Upvotes: 2

jondavidjohn
jondavidjohn

Reputation: 62392

the syntax is

$('formelement').attr('disabled',true);

or to re-enable

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

Upvotes: 15

Related Questions