Question

I’m trying to set the next input in the dom to read only but am going wrong.

Heres the jQuery:

$('select.expense-code').change(function(e) {

    // If expense code is travel mileage
    if ($(this).val() == '5') {
        // Set miles to read only
        var currentRowAmount = $(e.target).next("input.amount");
        currentRowAmount.attr('readonly', true);
    }

});

Heres that part of the dom:

I’ve tried just setting the bg colour etc but nothing works, I’m sure its down to the .next() bit but need a prod in the right direction. Console.log() just gives you [].

Thanks in advance

Answer 1

.next() grabs the immediate next sibling, it doesn’t search for anything, the filter argument is just to make sure that the next sibling is within the filter.

from the docs:

Description: Get the immediately following sibling of each element in
the set of matched elements. If a selector is provided, it retrieves
the next sibling only if it matches that selector.

Since you already have id on the target, you can just do:

// current id ($(this).prop('id')) is Expense0ExpenseCode
var curId = $(this).prop('id');

// you are targetting Expense0Amount, which has the same Expense0 as the prefix
// so replace the suffix (ExpenseCode -> Amount):
var targetId = curId.replace('ExpenseCode', 'Amount');

// do the prop change
$('#' + targetId).prop('readonly', true);

The one liner:

$('#' + $(this).prop('id').replace('ExpenseCode', 'Amount')).prop('readonly', true);