How to make textinput readonly based on the value of dropdown

I have this code in Laravel-5.8 project:

Controller

public function create()
{
     $categories = SportType::with('children')->where('company_id', $userCompany)->whereNull('parent_id')->get();
     $sport = new Sport();
       return view('sports.create')
            ->with('sport', $sport)
            ->with('categories', $categories);
}

View

    <form  action="{{route('sports.store')}}" method="post" class="form-horizontal" enctype="multipart/form-data">
        {{csrf_field()}}
          
       <div class="card-body">
        <div class="form-body">
        <div class="row">
            
          <div class="col-12 col-sm-6">
            <div class="form-group">
              <label class="control-label"> Sport Type:<span style="color:red;">*</span></label>
              <select id="sport_type" class="form-control @error('sport_type_id') is-invalid @enderror" name="sport_type_id">
              <option value="">Select Sport Type</option>

                @foreach ($categories as $category)
                @unless($category->name === 'Joggings')
                  <option hidden value="{{ $category->id }}" {{ $category->id == old('sport_type_id') ? 'selected' : '' }}>{{ $category->name }}</option>

                  @if ($category->children)
                    @foreach ($category->children as $child)
                    @unless($child->name === 'Joggings')
                      <option value="{{ $child->id }}" {{ $child->id == old('sport_type_id') ? 'selected' : '' }}>&nbsp;&nbsp;{{ $child->name }}</option>
                    @endunless
                    @endforeach
                  @endif
                  @endunless
                @endforeach
              </select>

            </div>
          </div>    
           
          <div class="col-12 col-sm-6">
            <div class="form-group">
              <label class="control-label"> Score:<span style="color:red;">*</span></label>
              <input  type="number" name="score" value="{{ old('score', $sport->score) }}" placeholder="Enter score here" class="form-control @error('score') is-invalid @enderror">

            </div>
          </div>  

       </div>
     </div>
    </div>          
    <!-- /.card-body -->
    <div class="card-footer">
      <button type="submit" class="btn btn-primary">{{ trans('global.save') }}</button>
    </div>           
       
    </form>

Already in my code, I have done it that when:

$child->name === 'Joggings'

the dorpdown should not load Joggings.

However, what I want to achieve is that when:

$child->name === 'Wresting'

<input  type="number" name="score" value="{{ old('score', $sport->score) }}" placeholder="Enter score here" class="form-control @error('score') is-invalid @enderror">

should be readonly

How do I achieve this?

Thank you.