What is the correct syntax to access elements ID iterated in an array?

I have a checkbox named disable next to an input field named hour[i].

Then there is an add button which would add a new row (will consist the exact same elements).

The checkbox when checked in any row, should disable the input field in that specific row only.

<tr v-for="(item, i) of $v.timesheet.items.$each.$iter">
    <td>
        <input
            type="text" 
            name="hour[]"
            id="hour[]"
        >
    </td>
    <td>
        <input 
            type= "checkbox" 
            name="disable"
            v-on:click="disabled(i)"
        >
    </td>
</tr>
<tr>
    <td>
        <button 
            type="button" 
            name="add" 
            class="btn btn-sm btn-primary" 
            @click="itemCount++"
        >Add Row
        </button>
    </td>
</tr>

<script>
export default {
  data() {
    return {
      timesheet: {
        items: [ {disabled: false} ],
      }
      disabled: (item) => { },
    };
  },
};
</script>

How do I complete the disabled() function to disable the input for hour?

disabled(index){
    

}

I tried with this, but it didn't work:

$('#hour['+index+']').attr('disabled', true);

What am I missing in the syntax?