Laravel Backpack中JS操作子字段：如何仅隐藏指定子字段

根据官方文档，crud.field('testimonials').subfield('text') 可返回testimonials可重复字段中text子字段对应的CrudField。我编写了如下JS代码：

crud.field('movement').onChange(function(field) {
    if (field.value == 'receive') {
        crud.field('document').show()
        crud.field('laundryItems').subfield('qty').hide();
    } else {
        crud.field('document').hide()
        crud.field('laundryItems').subfield('qty').show();
    }
}).change();

当前问题：当movement字段值改为receive时，可重复字段LaundryItems的按钮被一并隐藏，但我只想隐藏该可重复字段内的qty子字段。

方法1：直接操作DOM元素（精准控制） #

通过DOM选择器定位到可重复字段每行中的qty子字段元素，单独控制其显示状态，避免影响可重复字段的操作按钮：

crud.field('movement').onChange(function(field) {
    const isReceive = field.value === 'receive';
    // 控制document字段的显示/隐藏
    crud.field('document')[isReceive ? 'show' : 'hide']();
    
    // 获取laundryItems可重复字段的所有行
    const laundryRows = document.querySelectorAll('.repeatable-container[data-field-name="laundryItems"] .repeatable-row');
    
    laundryRows.forEach(row => {
        // 定位当前行中的qty子字段元素
        const qtyElement = row.querySelector('[data-field-name="qty"]');
        if (qtyElement) {
            isReceive ? qtyElement.classList.add('d-none') : qtyElement.classList.remove('d-none');
        }
    });
}).change();

方法2：利用Crud的多子字段API（如果支持） #

如果Crud提供了subfields()（复数形式）方法来获取可重复字段下的所有对应子字段实例，可直接遍历操作：

crud.field('movement').onChange(function(field) {
    const isReceive = field.value === 'receive';
    crud.field('document')[isReceive ? 'show' : 'hide']();
    
    // 获取laundryItems下所有qty子字段实例
    const qtyFields = crud.field('laundryItems').subfields('qty');
    qtyFields.forEach(qtyField => {
        qtyField[isReceive ? 'hide' : 'show']();
    });
}).change();

这两种方式都能仅针对qty子字段进行显示/隐藏控制，不会影响可重复字段的添加、删除等操作按钮。

内容的提问来源于stack exchange，提问作者Miquel Àngel