JS checkbox enable/disable input

Question

Q: How to enable/disable input with checkbox?

Each checkbox enable/disable input next to it. Number of groups is various (i = 1,2,3, ...n). Default setting is that inputs are disabled and checkbox unchecked.

JsFiddle: http://jsfiddle.net/tDCB9/

HTML:

<input type="checkbox" name="group1" value="">
<input type="text" name="name11" class="stat" value="">
<input type="text" name="name12" class="stat" value="">
<input type="text" name="name13" class="stat" value="">

JS:

$("input[name="group1"][type="checkbox"]").click(function() {
    $("input[name="name11"][type="text"]").attr("disabled", !this.checked);
    $("input[name="name12"][type="text"]").attr("disabled", !this.checked);
    $("input[name="name13"][type="text"]").attr("disabled", !this.checked);
});

jsfiddle.net/tDCB9/12

asprin
– asprin

2013-12-18 08:25:36 +00:00
Commented Dec 18, 2013 at 8:25 — asprin
– asprin, Commented Dec 18, 2013 at 8:25

Arun P Johny · Accepted Answer · 2013-12-18 08:21:24Z

4

You need to write a change() handler for the checkboxes and then use nextUntil() to find out the input fields to be disabled

$('input[type="checkbox"]').change(function(){
    $(this).nextUntil(':not(input:text)').prop('disabled', !this.checked)
}).change()

Demo: Fiddle

answered Dec 18, 2013 at 8:21

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

5 Comments

Royi Namir Over a year ago

why not $(this).nextUntil(':checkbox') ?

David Hellsing Over a year ago

@RoyiNamir Because that would include the <br> tag.

Royi Namir Over a year ago

@David Yes. didnt notice that br :-)

Royi Namir Over a year ago

@David so why not $(this).nextUntil('br') ??

Arun P Johny Over a year ago

@RoyiNamir that is right... I was not sure about the last item... that is why I opted for the input:text selector

kevpoccs · Accepted Answer · 2013-12-18 08:23:12Z

1

your code works, it's just a question of simple quote / double quote,

$("input[name='group1'][type='checkbox']")

Demo Corrected

answered Dec 18, 2013 at 8:23

kevpoccs

6355 silver badges8 bronze badges

Comments

Ringo · Accepted Answer · 2013-12-18 08:25:44Z

0

Try this:

$("input[name='group1'][type='checkbox']").click(function() {
    if($(this).prop('checked')){
        $("input[name='name11'][type='text']").attr("disabled", 'disabled');
    }
    else{
        $("input[name='name11'][type='text']").removeAttr("disabled");
    }
});

answered Dec 18, 2013 at 8:25

Ringo

3,9873 gold badges25 silver badges38 bronze badges

Comments

jeremija · Accepted Answer · 2013-12-18 08:27:00Z

0

Here is a working fiddle.

$('input[type="checkbox"]').click(function() {
    $(this).siblings('input').attr('disabled', this.checked);
});

You just need to separate the input groups in a container.

answered Dec 18, 2013 at 8:27

jeremija

2,5581 gold badge21 silver badges28 bronze badges

Comments

Sid M · Accepted Answer · 2013-12-18 08:27:01Z

0

Try this

$("input[name='group1'][type='checkbox']").click(function() {
    $("input[name='name11'][type='text']").attr("disabled", !this.checked);
    $("input[name='name12'][type='text']").attr("disabled", !this.checked);
    $("input[name='name13'][type='text']").attr("disabled", !this.checked);
});

answered Dec 18, 2013 at 8:27

Sid M

4,3744 gold badges33 silver badges51 bronze badges

Comments

Royi Namir · Accepted Answer · 2013-12-18 08:32:14Z

0

You can use simple selector :

 $('input:checkbox').change(function(){
        $(this).nextUntil('br').prop('disabled', !this.checked)
    }).change();

answered Dec 18, 2013 at 8:32

Royi Namir

149k145 gold badges502 silver badges833 bronze badges

Comments

Nisarg · Accepted Answer · 2013-12-18 08:40:20Z

0

Try This

$("input[name='group1'][type='checkbox']").click(function() {   
$("input[name='name11'][type='text']").attr("disabled", this.checked);
$("input[name='name12'][type='text']").attr("disabled", this.checked);
$("input[name='name13'][type='text']").attr("disabled", this.checked);
});

answered Dec 18, 2013 at 8:40

Nisarg

3,2975 gold badges34 silver badges55 bronze badges

Collectives™ on Stack Overflow

JS checkbox enable/disable input

7 Answers 7

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related