1

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:

Improve this question
3
  • You're setting the checked property in var selector, rather than choosing those that were checked. Try var selector = $('input:radio:checked:); Commented May 8, 2014 at 13:52
  • You say you cannot add classes. How about adding ID's to elements you want to pick out later? Commented May 8, 2014 at 13:55
  • @Bobby unfortunately the elements are created dynamically and I don't have access to HTML and the id is occupied by wicket:id. Commented May 8, 2014 at 13:58

5 Answers 5

Reset to default
3

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);
    })
})
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

yes first time your answer was the correct one and after that you have updated or I don't know what happen.
pls edit your answer maybe in future this question will help others and need to have the right answer, ty.
@mcmwhfy You question was a little bit unclear, but after answering, i'Ve reread your question to see that you wanted it to be the other way. At the end, i though that if you understand that snippet, you would have no problem reversing the result.
I've already edited the answer, but tell me clearly what you really need. The checked radio to have an enabled input or the checked radio to have a disabled input?
maybe I was a little bit unclear with my question but this is the correct answer, the selected radio must have input:text enabled and the others disabled. If may I ask you another question, if DOM is modified how to re initiate this function in order to work every time when another section with this component is loaded. ty in advance.
|
1

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.

Improve this answer

2 Comments

actually this is the correct answer, need to enable the selected element and disabled the others. ty.
@mcmwhfy Your question was stating the other way : "disable only this element when radio is selected". My original answer achieved the same result as this one. You just need to revert the return value.
1

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/

Improve this answer

Comments

1

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');        
})
Improve this answer

Comments

1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.