VueJSの特定のドロップダウンを無効にするための特定のチェックボックスをバインドしますか？

Question

テーブルがあり、各行にチェックボックス、名前、別のチェックボックス、およびドロップダウンがあります。ドロップダウンをデフォルトで無効にして、最初のチェックボックスをオンにしたときにのみ有効にします。ここで

はHTMLです：

<tbody> 
    <tr v-for="item in Items" v-bind:id="item.ID"> 
     <td> 
      <!-- check this checkbox and enable/disable the dropdown --> 
      <input type="checkbox" v-on:click="onSelect($event)" v-model="item.Selected" /> 
     </td> 
     <td> 
      {{ item.Name }} 
     </td> 
     <td> 
      <input type="checkbox" v-model="item.isActive" />< 
     <td> 
      <!-- enabled/disabled depending on if checkbox is checked --> 
      <select v-bind:disabled=""> 
       <option value="foo">foo</option> 
       <option value="bar">bar</option> 
      </select> 
     </td> 
    </tr> 
</tbody> 

現在チェックされている場合、onSelect($event)メソッドは、同じ行の2番目のチェックボックスをチェックします。ここで

は私のJavaScriptのだ：

var vm = new Vue({ 
    el: '#app', 
    data: { 
     items: items 
    }, 
    methods: { 
     onSelect: function (event, id) { 
      setTimeout(function() { 
       var idx = $(event.target).closest('tr').index(); 
       if (items[idx].Selected) { 
        items[idx].isActive = true; 
       } 
      }, 100); 
     } 
    } 
}); 

はVueJS 2/JavaScriptを/ jQueryを使ってチェックボックスのドロップダウンの有効/無効をバインドする方法はありますか？

Answer 1

これに実際にjQueryやイベントを使用する必要はありませんが、Vueのデータバインディングを使用するだけで済みます。最初のチェックボックスにv-model="item.Selected"と入力してから、選択項目にv-bind:disabled="!item.Selected"と設定します。

HTML：

<!-- index.html --> 
<div id="app"> 
    <table> 
    <tbody> 
     <tr v-for="item in items"> 
     <td> 
      <!-- check this checkbox and enable/disable the dropdown --> 
      <input type="checkbox" v-model="item.Selected"/> 
     </td> 
     <td> 
      {{ item.Name }} 
     </td> 
     <td> 
      <!-- enabled/disabled depending on if checkbox is checked --> 
      <select v-bind:disabled="!item.Selected"> 
      <option value="foo">foo</option> 
      <option value="bar">bar</option> 
      </select> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

はJavaScript：

// app.js 
const vm = new Vue({ 
    el: '#app', 
    data() { 
    return { 
     items: [ 
     { ID: 1, Name: 'name 1', isAcitve: false, Selected: false }, 
     { ID: 2, Name: 'name 2', isAcitve: false, Selected: false }, 
     { ID: 3, Name: 'name 3', isAcitve: false, Selected: false }, 
     ] 
    } 
    }, 
}) 

私はa pen which displays thisを添付しました。