How to disable a textbox if a checkbox is checked using jQuery?

Question

I want to disable a textbox if a user unchecks a checkbox and change the background colour of textbox. If the user checks the checkbox then that textbox should be editable and changes to white colour. Here is the code

$(document).ready(function () {
    $(".ba").click(function () {
        $(".tex").css("background-color", "#CCCCCC");
    });
});

Where .ba is the checkbox and .tex is textbox classes, now when the user clicks it changes to grey color but if they click again the color not changing.I want to see if the check box is checked if it is checked then nothing should happen else if the user uncheck the check box the textbox background color should change and it should go to non-editable that is disabled.Can anyone help?

I am using Below javascript to check all and uncheck all

function checkAll(formname, checktoggle) {
    var checkboxes = new Array(); 
    checkboxes = document[formname].getElementsByTagName('input');

    for (var i=0; i<checkboxes.length; i++)  {
        if (checkboxes[i].type == 'checkbox')   {
            checkboxes[i].checked = checktoggle;
        }
    }
}

Is this causes any problem?

score 6 · Accepted Answer · 2013-05-28 05:03:15Z

6

Working jsFiddle Demo

Consider the following markup:

<input type="checkbox" class="ba" checked="checked" />
<input type="text" class="tex" />

And your JS:

$(function () {
    $('.ba').on('change', function () {
        var checked = $(this).prop('checked');
        $('.tex').prop('disabled', !checked);
    });
});

edited May 28, 2013 at 5:03

answered May 25, 2013 at 10:04

user1823761

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

3 Comments

user1823761 Over a year ago

@raj Did you check the FIDDLE demo? Which versin of jQuery are you using?

BoltClock Over a year ago

Why do you capitalize jQuery correctly but spell and capitalize jsFiddle wrongly? And consistently wrongly, at that.

user1823761 Over a year ago

@BoltClock OK, you are exactly right, I'll keep it in mind ;).

alexb · Accepted Answer · 2013-05-25 10:08:58Z

3

Here is JS the code

$(".ba").click(function () {
    if ($(".ba").is(":checked")) {
        $(".tex")
            .removeAttr("disabled")
            .css("background-color", "white");
    }
    else {
        $(".tex")
            .attr("disabled", "disabled")
            .css("background-color", "red");
    }
});

I recommend you to check out Jquery API. It's a fun read :)

answered May 25, 2013 at 10:08

alexb

9816 silver badges12 bronze badges

3 Comments

sun Over a year ago

how can i do this to all checkbox with different class.can i use this function again and again?

alexb Over a year ago

do you mean that you have multiple checkboxes that each should enable/disable a textbox?... sorry for being late

sun Over a year ago

Ya i used the same function for all.It's all working.Only thing is if i uncheck all then all the check box are unchecking but not disabling because i used another javascript function(Shown in my question) to do this.

himadri · Accepted Answer · 2013-05-25 10:09:30Z

1

$(document).ready(function(){
$(".ba").click(function() {
if ($('#check_id').is(":checked"))
{
  $(".tex").css("background-color","#CCCCCC");
}
else
{
   $(".tex").css("background-color","#DDDDDD");
}
});
});

answered May 25, 2013 at 10:09

himadri

6386 silver badges19 bronze badges

Comments

GautamD31 · Accepted Answer · 2013-05-25 10:16:47Z

1

Try like

$(".ba").on('click',function() {
   if($(this).is(':checked'))
       $(".tex").css("background-color","#CCCCCC");
   else
       $('.tex').prop('disabled', false);
})'

edited May 25, 2013 at 10:16

answered May 25, 2013 at 10:05

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

1 Comment

sun Over a year ago

working for one time only,if i unchecks(click again) text background color not changing to white.

Collectives™ on Stack Overflow

How to disable a textbox if a checkbox is checked using jQuery?

4 Answers 4

3 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related