Selecting a specific element from a group of elements sharing the same class using JQuery

Question

Selecting a specific element from a group of elements sharing the same class using JQuery

Is there a way to target individual elements from a group of elements that share the same classes or other properties without assigning different classes to each element? I need to be able to work on each element separately. I have attempted this approach, but it ends up targeting all elements with input:text due to my incorrect logic in selecting each element individually.

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:

javascript jquery html css

Answer 1

Answer №1

To easily achieve this, utilize the DOM navigation method with the following code:

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);
    })
});

Check out this Fiddle for a working example: http://jsfiddle.net/D2RLR/5874/

If dealing with dynamic input, Event delegation is required (learn 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);
    })
})

Answer 2

To easily achieve this, utilize the DOM navigation method with the following code:

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);
    })
});

Check out this Fiddle for a working example: http://jsfiddle.net/D2RLR/5874/

If dealing with dynamic input, Event delegation is required (learn 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);
    })
})

Answer 3

Answer №2

I am not completely clear on your objective, but utilizing $(this) can help target the specific element that triggered the event instead of using a selector.

Perhaps this code snippet aligns with what you are aiming for:

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

This script disables all input:text elements and then enables the one linked to the selected radio button.

Answer 4

I am not completely clear on your objective, but utilizing $(this) can help target the specific element that triggered the event instead of using a selector.

Perhaps this code snippet aligns with what you are aiming for:

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

This script disables all input:text elements and then enables the one linked to the selected radio button.

Answer 5

Answer №3

Give this a shot:

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

})

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

Answer 6

Give this a shot:

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

})

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

Answer 7

Answer №4

Why complicate when you can simplify?

Check out this simplified version

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

Answer 8

Why complicate when you can simplify?

Check out this simplified version

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

Answer 9

Answer №5

It seems like there may be some confusion regarding what you are trying to accomplish with your query and how specific or general your question is. If the elements you are selecting have the same attributes, including class, you might need to consider the context they are within or even their order in the DOM.

Context: For example, if you are looking for elements with the class "many_like_me" inside a parent element with the ID #parent_id, you can refine your selector as "#parent_id p.many_like_me".
Order: Alternatively, if you know you want to select the third element in the DOM that matches your selector, you can use the get() method like so: $("p.many_like_me").get(2) (remembering that the index starts at zero).

If your selection needs to be based on an event triggered by another nearby or related element, then some of the other suggestions provided here may be helpful.

Answer 10

It seems like there may be some confusion regarding what you are trying to accomplish with your query and how specific or general your question is. If the elements you are selecting have the same attributes, including class, you might need to consider the context they are within or even their order in the DOM.

Context: For example, if you are looking for elements with the class "many_like_me" inside a parent element with the ID #parent_id, you can refine your selector as "#parent_id p.many_like_me".
Order: Alternatively, if you know you want to select the third element in the DOM that matches your selector, you can use the get() method like so: $("p.many_like_me").get(2) (remembering that the index starts at zero).

If your selection needs to be based on an event triggered by another nearby or related element, then some of the other suggestions provided here may be helpful.

Selecting a specific element from a group of elements sharing the same class using JQuery

Answer №1

Answer №2

Answer №3

Answer №4

Check out this simplified version

Answer №5

Similar questions

Issue with IE11 not saving specific object value after performing a GET request

Error: Jquery Ajax popup form unable to submit data

How can I merge data() objects in jQuery?

Tips for ensuring that hover:after contents do not impact the positioning of the next element

Retrieving data through the combination of jQuery, PHP, and MySQL

I'm looking for a method to retrieve the value of an option tag and then pass it to a helper within handlebars. Can someone

Dealing with an undefined variable problem in CodeIgniter

How can one effectively compare the value received from value.val() with a regular expression in search fields? Is it possible to use multiple

Execute an AJAX request when the browser is closed, rather than when the URL is

I am currently facing difficulty in retrieving the selected value from a jQuery dropdown menu

The Dysfunction of JQuery UI 1.12.1 Autocomplete

Transferring files to Django using AJAX

Destructuring and For of Loop in ES6: Capturing the first object only

Changes on services do not affect the Angular component

Issue with hamburger icon in Bootstrap navbar following height adjustment of the navbar

How to dynamically update the maximum y-axis value in Vue-Chart.js without having to completely re-render the entire

An increasing number of DOM elements causing slowdown in performance

Setting the date in materializecss with jQuery: a simple guide

How can I efficiently choose specific documents or items from a MongoDB collection when working within a loop?

Change the color when hovering over the select box