使用函数返回 html 在选择选项上添加禁用属性

Question

我正在使用此功能在选择框中添加选项。选项已成功添加，但我不知道使用函数添加额外属性。那么如何在值为 0 的第一个选项上添加额外的属性，例如禁用 <option value="0" disable>Select Fee Head</option>。

功能

public function feeHtmlRow()
    {
        $fee_heads = [];
        $fee_heads[0] = 'Select Fee Head';
        foreach (FeeHead::select('id', 'fee_head_title')->get() as $fees) {
            $fee_heads[$fees->id] = $fees->fee_head_title;
        }
        $response['html'] = view($this->view_path.'.includes.fee_tr', [
            'fee_heads' => $fee_heads
        ])->render();
        return response()->json(json_encode($response));

    }

jQuery

$('#load-html-btn').click(function () {

            $.ajax({
                type: 'POST',
                url: '{{ route('account.fees.master.fee-html') }}',
                data: {
                    _token: '{{ csrf_token() }}',
                },
                success: function (response) {
                    var data = $.parseJSON(response);

                    if (data.error) {
                       // $.notify(data.message, "warning");
                    } else {

                        $('#fee_wrapper').append(data.html);
                        //$.notify(data.message, "success");

                    }
                }
            });

        });

输出

<select class="form-control" required="" name="fee_head[]">
     <option value="0">Select Fee Head</option>
     <option value="2">APPLICATION FORM</option>
     <option value="1">MONTHLY FEE</option>
     <option value="4">REGISTRATION FEE</option>
     <option value="3">TUTION FEE</option>
</select>

Answer 1

使用jQuery，选择第一个选项并将其禁用，或者您可以在生成select 时将disable 添加到您的第一个选项中

$('option[value="0"]').attr("disabled", "disabled");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" required="" name="fee_head[]">
  <option value="0">Select Fee Head</option>
  <option value="2">APPLICATION FORM</option>
  <option value="1">MONTHLY FEE</option>
  <option value="4">REGISTRATION FEE</option>
  <option value="3">TUTION FEE</option>
</select>

更新

添加选项后，使用$(document).find('option[value="0"]').attr("disabled", "disabled"); 禁用第一个选项。

$('#load-html-btn').click(function () {

        $.ajax({
            type: 'POST',
            url: '{{ route('account.fees.master.fee - html') }}',
            data: {
                _token: '{{ csrf_token() }}',
            },
            success: function (response) {
                var data = $.parseJSON(response);

                if (data.error) {
                    // $.notify(data.message, "warning");
                } else {

                    $('#fee_wrapper').append(data.html);
                    //$.notify(data.message, "success");
                    // disable the first option after appending the select
                    $(document).find('option[value="0"]').attr("disabled", "disabled");
                }
            }
        });

    });