enable a textbox when check a checkbox

Question

I try using a jquery to enable a textbox when checked a checkbox. my page jquery:

<script>
$(document).ready(function(){
  $('#isNews').change(function(){
    $("#newsSource").prop("disabled",false);
});
});
</script>

html:

<label class="checkbox">
    <input type="checkbox" id="isNews" name="isNews">If you want send news:
</label>
<label for="newsSource" class="ilable">news source</label>
<input id="newsSource" name="newsSource" class="input-xlarge" disabled="" type="text" placeholder="news source">

what's the problem?

score 14 · Accepted Answer · answered Feb 08 '13 at 06:26

14

Change to

$('#isNews').change(function(){
   $("#newsSource").prop("disabled", !$(this).is(':checked'));
});

Demo: Fiddle

answered Feb 08 '13 at 06:26

Arun P Johny

384,651
66
527
531

It didn't work. can you see my page? please – Ehsan Feb 08 '13 at 06:30
@Ehsan You need to use the `change` event as given `$('#isNews').change(function(){ $("#newsSource").prop("disabled", !$(this).is(':checked')); });` – Arun P Johny Feb 08 '13 at 06:36

score 4 · Answer 2 · answered Feb 08 '13 at 06:28

4

Apart from the error related to non-inclusion of jQuery, change your code to this:

$('#isNews').change(function () {
    $("#newsSource").prop("disabled", !this.checked);
});

answered Feb 08 '13 at 06:28

Sang Suantak

5,213
1
27
46

score 2 · Answer 3 · answered Feb 08 '13 at 06:27

2

I don't speak Arabic, but you're including jQuery after the rest of all of your scripts. You need to include jQuery first.

You're getting "Undefined variable $" in the console. Always pay attention to the console.

answered Feb 08 '13 at 06:27

Explosion Pills

188,624
52
326
405

+1!!!! you are always fast...:):) – bipen Feb 08 '13 at 06:30
I put jquery in header and delete it from footer but it don't work – Ehsan Feb 08 '13 at 06:38
@Ehsan you also removed the `.change` event for some reason – Explosion Pills Feb 08 '13 at 06:39

score 0 · Answer 4 · answered Feb 08 '13 at 06:27

0

the error you have there is

$ is not defined

so you probabaly havn't loaded jquery.. :)

add this in your <head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

answered Feb 08 '13 at 06:27

bipen

36,319
9
49
62

I put jquery in head but it don't work yet – Ehsan Feb 08 '13 at 06:39

score 0 · Answer 5 · answered Feb 08 '13 at 06:28

Here is your correct code

<script>
$(document).ready(function(){
  $('#isNews').click(function(){
    if($(this).is(":checked"))
       $("#newsSource").removeAttr("disabled");
    else
       $("#newsSource").atte("disabled" , "disabled");
});
});
</script>

score 0 · Answer 6 · answered Feb 08 '13 at 06:29

0

I opened the link given by you. in your page source the problem is you are including jquery after the the jquery code. Try adding it before the document.ready code.

answered Feb 08 '13 at 06:29

Vikash Pandey

68
3

I include jquery in header but problem isn't solved – Ehsan Feb 08 '13 at 06:32

enable a textbox when check a checkbox

6 Answers6