Add disable attribute on select options using function return html

Question

I am using this function to add option in to select box. Options are added successfully but i don't know to add extra attribute using function. so how can i add extra attribute like disable <option value="0" disable>Select Fee Head</option> on first option which value is 0.

function

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

                    }
                }
            });

        });

output

<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

Using jQuery, select the first option and disable it, or you can just add disable to your first option, when you generate the select

$('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>

UPDATE

After appending your options, use $(document).find('option[value="0"]').attr("disabled", "disabled"); to disable the first option.

$('#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");
                }
            }
        });

    });