CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mcmwhfy
mcmwhfy

Reputation: 1686

JQuery targeting one element from many with same class

how can I target separately elements from a multitude of elements with the same classes or other properties. I cannot add different classes on each element so I need to target each element when I'm working on. I have tried this so far but it is targeting all elements with input:text because my wrong condition of targeting each separately element working on.

var selector = $('input:radio').prop("checked", true);
var element = $ ('input:text');

$(selector).on('change', function( event ) {
if(this){
    $(element).prop('disabled', true);
     alert('disable only this element when radio is selected');
}
else{ 
    alert('others input:text not disabled');
    $('input:text').prop("disabled", false);
}
})

Fiddle:

Upvotes: 1

Views: 1628

Answers (5)

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33870

By using DOM navigation method, you can do it really easily. Just use this :

var selector = $('input:radio').prop("checked", true);
var element = $ ('input:text');

$(selector).on('change', function( event ) {
    var el = $(this).closest('.input-group').find('input:text');
    element.prop('disabled', function(){
        return !el.is(this);
    })
});

Fiddle : http://jsfiddle.net/D2RLR/5874/

For dynamic input, you'll need to use Event delegation (read more here):

//document should be closest static element
$(document).on('change', 'input:radio', function(){
    var el = $(this).closest('.input-group').find('input:text');
    $('input:text').prop('disabled', function(){
        return !el.is(this);
    })
})

Upvotes: 3

stashdjian
stashdjian

Reputation: 41

As others said, its not exactly clear what you're trying to do, or how general is your question. If the elements matching your selector have exactly the same attributes (including class), you may need to base on the context they are embedded on, or as a last resource, you may be able to base on the order of these elements.

  • Context: If you're looking for "p.many_like_me" , and you know the element you're trying to match is inside of #parent_id, you just refine your selector as "#parent_id p.many_like_me"

  • Order: If you know you're looking for the third element on the DOM matching your selector, you can use get() to select it: $("p.many_like_me").get(2) (get takes an index zero-based).

If you need to select them based on an event triggered by a nearby or somehow-related element, then some of the other answers given here are ok.

Upvotes: 1

SW4
SW4

Reputation: 71150

Why not simplify?

Demo Fiddle

$('input:radio').on('change', function (event) {
    $('input[type=text]').prop('disabled', false);
    $(this).parent().next('input[type=text]').prop('disabled', 'false');        
})

Upvotes: 1

pumpkinzzz
pumpkinzzz

Reputation: 2967

Try this:

$(selector).on('change', function( event ) {
    $('input:text').prop("disabled", false);
    $(this).closest('.input-group').find(element).prop('disabled', true);

})

http://jsfiddle.net/D2RLR/5869/

Upvotes: 1

Sam
Sam

Reputation: 5014

I don't understand exactly what you're trying to do, but you can use $(this) to target the element that triggered the event instead of trying to use a selector.

I think something like this is what you want:

$(selector).on('change', function( event ) {
    $("input:text").prop("disabled", true);
    $(this).parent().siblings("input:text").prop("disabled", false);
})

It disables all of the input:text and then enables the one whose radio button was selected.

Upvotes: 1

Related Questions