Disable/ enable dynamically input/ textarea/ select fields with jQuery

Question

I have the following code with three options in a select box which should dynamically enable/disable the attribute "disable" in the input fields/ textarea / select, but the code doesn't work at all:

 $(document).ready(function() {
$('.fieldcontent').not('.info').hide();
$('#selector_cs').change(function() {

      $('.fieldcontent').customFadeOut(100);
      $('.' + $(this).val()).customFadeIn(900);
     // $('input').prop('disabled',false);
    //$('textarea').prop('disabled',false);
    //$('select').prop('disabled',false);
 //option1
 if ($("this:selected").val() === 'help') {
$("textarea[name='message']").prop('disabled',false);
$("input[name='domain']").prop('disabled',false);
}else{
    $("textarea[name='message']").prop('disabled',true);
$("input[name='domain']").prop('disabled',true);
    };
    //option2
     if ($("this:selected").val() === 'info') {
$("textarea[name='message']").prop('disabled',false);

}else{
    $("textarea[name='message']").prop('disabled',true);
};
     //option3
     if ($("this:selected").val() === 'products') {
$("textarea[name='message']").prop('disabled',true);
$("select[name='products']").prop('disabled',false);
$("input[name='domain']").prop('disabled',false);
$("input[name='address']").prop('disabled',false);
$("input[name='state']").prop('disabled',false);
$("input[name='city']").prop('disabled',false);
$("input[name='country']").prop('disabled',false);
};      
});  });

Can anyone help me to write the code properly?

Thanks in advance for any help

EDIT: Thanks @Ken and @arun for the quick help. Now the jQuery is working.

But: I have a PHP validation which doesn't pass with the fiedls disabled by jQuery. Why?

Otherwise, i don't want to add/ remove dynamic hidden fields by jquery, because when the user receive a mail, he would see the hidden fields values, which aren't "real" values, but with values like "some1", "some2" ecc.

How to avoid this and using diasabled fields instead passing the php validation?

.attr('disabled', true)

Matheus
– Matheus

2013-03-22 16:19:40 +00:00
Commented Mar 22, 2013 at 16:19 — Matheus
– Matheus, Commented Mar 22, 2013 at 16:19

Arun P Johny · Accepted Answer · 2013-03-22 16:29:58Z

Your selector $("this:selected").val() is wrong, it should be $(this).val() to get the selected value

$(document).ready(function() {
    $('.fieldcontent').not('.info').hide();
    $('#selector_cs').change(function() {

        $('.fieldcontent').customFadeOut(100);
        $('.' + $(this).val()).customFadeIn(900);
        // $('input').prop('disabled',false);
        //$('textarea').prop('disabled',false);
        //$('select').prop('disabled',false);
        //option1
        if ($(this).val() === 'help') {
            $("textarea[name='message']").prop('disabled',false);
            $("input[name='domain']").prop('disabled',false);
        }else{
            $("textarea[name='message']").prop('disabled',true);
            $("input[name='domain']").prop('disabled',true);
        };
        //option2
        if ($(this).val() === 'info') {
            $("textarea[name='message']").prop('disabled',false);

        }else{
            $("textarea[name='message']").prop('disabled',true);
        };
        //option3
        if ($(this).val() === 'products') {
            $("textarea[name='message']").prop('disabled',true);
            $("select[name='products']").prop('disabled',false);
            $("input[name='domain']").prop('disabled',false);
            $("input[name='address']").prop('disabled',false);
            $("input[name='state']").prop('disabled',false);
            $("input[name='city']").prop('disabled',false);
            $("input[name='country']").prop('disabled',false);
        };      
    }); 
});

Demo: Fiddle

Ken Hannel · Accepted Answer · 2013-03-22 16:25:46Z

Changing $("this:selected").val() to $(this).val() should fix your issue

$(document).ready(function () {
    $('.fieldcontent').not('.info').hide();

    $('#selector_cs').change(function () {
        $('.fieldcontent').customFadeOut(100);
        $('.' + $(this).val()).customFadeIn(900);

        // $('input').prop('disabled',false);
        //$('textarea').prop('disabled',false);
        //$('select').prop('disabled',false);
        //option1

        if ($(this).val() === 'help') {
            $("textarea[name='message']").prop('disabled', false);
            $("input[name='domain']").prop('disabled', false);
        } else {
            $("textarea[name='message']").prop('disabled', true);
            $("input[name='domain']").prop('disabled', true);
        }

        //option2
        if ($(this).val() === 'info') {
            $("textarea[name='message']").prop('disabled', false);

        } else {
            $("textarea[name='message']").prop('disabled', true);
        }

        //option3
        if ($(this).val() === 'products') {
            $("textarea[name='message']").prop('disabled', true);
            $("select[name='products']").prop('disabled', false);
            $("input[name='domain']").prop('disabled', false);
            $("input[name='address']").prop('disabled', false);
            $("input[name='state']").prop('disabled', false);
            $("input[name='city']").prop('disabled', false);
            $("input[name='country']").prop('disabled', false);
        }
    });
});

Collectives™ on Stack Overflow

Disable/ enable dynamically input/ textarea/ select fields with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related