CODEWITHSUNDEEP
jqueryjquery-selectors
Bounce
Bounce

Reputation: 2095

Selecting 2 child elements after checkbox element

I have the following code structure:

<input type="checkbox" name="some_name_1" value="some_val" />
<input type="text" name="input_name_1" value="xxx" />
<input type="text" name="input_name_2" value="yyy" />

<input type="checkbox" name="some_name_2" value="some_val" />
<input type="text" name="input_name_3" value="xxx" />
<input type="text" name="input_name_4" value="yyy" />

What Im trying to do:

On checkbox click Im checking is checkbox checked. If no then I disable first(child) and second(child) inputs. So Im stucked with JQuery code:

$("input:checkbox[name*=some_name_]").click(function(){
     if(typeof $(this + ":checked").val() == "undefined"){
       //disable two child inputs               
     }else{
       //enable two child inputs    
     }
});

So where I have commented lines that should be input text disable code. Im trying many variants but still no luck.

Any ideas ?

Your help would be appreciated.

Edited:

And what if I add some extra tags to my HTML:

<table>
    <tr>
        <td>
           <input type="checkbox" name="some_name_1" value="some_val" />
        </td>
        <td>       
          <input type="text" name="input_name_1" value="xxx" />
        </td>
        <td>   
          <input type="text" name="input_name_2" value="yyy" />
        </td>
    </tr>
</table>

How should I change JQuery code according to these HTML changes ?

Upvotes: 0

Views: 974

Answers (4)

Alnitak
Alnitak

Reputation: 339955

Here's a version that disables all input elements up to (but not including) the next checkbox, without changing the markup:

$("input:checkbox[name*=some_name_]").click(function() {
    if ($(this).is(':checked')) {
        $(this).nextUntil(':checkbox').filter('input').attr('disabled', true);
    } else {
        $(this).nextUntil(':checkbox').filter('input').removeAttr('disabled');
    }
});

demo at http://jsfiddle.net/7hSu7/

Upvotes: 1

David Thomas
David Thomas

Reputation: 253446

The easiest way I could see to achieve this is with:

$('input:checkbox').click(
    function(){
        if ($(this).is(':checked')){
            $(this).siblings('input:text').attr('disabled',true);
        }
        else {
            $(this).siblings('input:text').removeAttr('disabled');
        }
    }).change();

JS Fiddle demo.

Edited in response to @Alnitak's comment, below:

this only works because you've changed the mark up

The following jQuery avoids that 'problem,' and works with the code as presented:

$('input:checkbox').click(    
    function() {
        if ($(this).is(':checked')) {
            $(this).nextUntil('input:checkbox').attr('disabled',true);
        }
        else {
            $(this).nextUntil('input:checkbox').removeAttr('disabled');
        }
    }).change();

Revised JS Fiddle demo.

Upvotes: 1

lonesomeday
lonesomeday

Reputation: 237995

$("input:checkbox").change(function(){ // when the value changes, not just clicks
    if (this.checked) { // if the checkbox is checked
        $(this)
            .next() // select the next element
                .removeAttr('disabled') // enable it
                .next() // and the next one
                    .removeAttr('disabled'); // enable that one too
    } else { // otherwise
        $(this)
            .next() // select the next element
                .attr('disabled', true) // disable it
                .next() // and the next one
                    .attr('disabled', true); // disable that too
    }
}).change(); // trigger immediately to get the elements disabled if necessary

jsFiddle.

See the manual pages:

Note especially the problem with this line in your question:

if(typeof $(this + ":checked").val() == "undefined"){

You can't concatenate an element and a string. Moreover, this is not the way to check if an element exists. You need to do that by using the length property:

if ($(this).filter(':checked').length) {

or better:

if ($(this).is(':checked')) {

or, even better, per my above code:

if (this.checked) {

Upvotes: 2

Andy Groff
Andy Groff

Reputation: 2670

If you can change the html up, you could try something like this:

<div class="parentDiv">
<input type="checkbox" name="some_name_1" value="some_val" />
<input class="textBox" type="text" name="input_name_1" value="xxx" />
<input class="textBox" type="text" name="input_name_2" value="yyy" />
</div>

Then for the javascript, i'd use jquery's context function.

$("input:checkbox[name*=some_name_]").click(function(){
     var parent = $(this).parent();
     if(typeof $(this + ":checked").val() == "undefined"){
       //disable two child inputs  
       $(".textBox", parent).attr("disabled", "disabled");
     }else{
       //enable two child inputs    
       $(".textBox", parent).removeAttr("disabled");
     }
});

Not the most elegant thing ever written, but i think it should work.

Upvotes: 1

Related Questions