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 5 · Answer 1 · 2013-05-28T05:03:15.807

5

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 '13 at 05:03

answered May 25 '13 at 10:04

@raj Did you check the FIDDLE demo? Which versin of jQuery are you using? – May 25 '13 at 10:15
Why do you capitalize jQuery correctly but spell and capitalize jsFiddle wrongly? And consistently wrongly, at that. – BoltClock May 25 '13 at 16:12
@BoltClock OK, you are exactly right, I'll keep it in mind `;)`. – May 26 '13 at 07:02

score 3 · Accepted Answer · answered May 25 '13 at 10:08

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 '13 at 10:08

alexb

971
6
12

how can i do this to all checkbox with different class.can i use this function again and again? – sun May 25 '13 at 11:53
do you mean that you have multiple checkboxes that each should enable/disable a textbox?... sorry for being late – alexb May 27 '13 at 18:20
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. – sun May 28 '13 at 05:23

GautamD31 · Answer 3 · 2013-05-25T10:16:47.713

1

Try like

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

edited May 25 '13 at 10:16

answered May 25 '13 at 10:05

GautamD31

28,552
10
64
85

working for one time only,if i unchecks(click again) text background color not changing to white. – sun May 25 '13 at 10:15

score 1 · Answer 4 · answered May 25 '13 at 10:09

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 '13 at 10:09

himadri

626
5
19

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

4 Answers4

Linked