设置一个动态控制disabled的单选框
时间: 2024-03-05 18:50:10 浏览: 19
可以使用Vue.js来实现一个动态控制disabled的单选框,以下是一个示例代码:
```html
<template>
<div>
<input type="radio" id="option1" value="option1" v-model="selectedOption" :disabled="isDisabled">
<label for="option1">Option 1</label>
<br>
<input type="radio" id="option2" value="option2" v-model="selectedOption" :disabled="isDisabled">
<label for="option2">Option 2</label>
<br>
<button @click="toggleDisabled">Toggle Disabled</button>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
isDisabled: true
};
},
methods: {
toggleDisabled() {
this.isDisabled = !this.isDisabled;
}
}
};
</script>
```
在上面的代码中,我们使用了Vue.js的指令来动态绑定单选框的disabled属性。当isDisabled为true时,单选框将被禁用,当isDisabled为false时,单选框将可用。我们还提供了一个按钮,用于切换isDisabled的值,以便动态控制单选框的可用性。