jquery - 更改 next('input') 的 attr 失败

Question

我正在尝试将 dom 中的下一个输入设置为只读但出错了。

继承人的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);
    }

});

这是dom的那一部分：

我试过只设置 bg 颜色等，但没有任何效果，我确定它到 .next() 位，但需要一个正确方向的刺激。Console.log() 只是给你[]。

提前致谢

Answer 1

.next()抓取紧邻的下一个兄弟，它不搜索任何东西，过滤器参数只是为了确保下一个兄弟在过滤器内。

来自文档：

描述：获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

由于您已经在目标上有 id ，您可以这样做：

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

一个班轮：

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

Answer 2

您的元素根本不是兄弟姐妹，它们位于两个不同的父.span1元素中：

$('select.expense-code').on('change', function(e) {
    if ($(this).val() == '5') {
        $(this).closest('.span1')
               .next('.span1')
               .find('input.amount')
               .prop('readonly', true);
    }
});