前端按钮控制,选择一个单选按钮控制另一个是否可选
时间: 2023-05-24 21:01:35 浏览: 131
好的,我理解了你的要求。针对你的问题,我建议使用 JavaScript 来实现。你可以给第一个单选按钮添加 click 事件监听器,当点击时,通过修改第二个单选按钮的 disabled 属性来控制其是否可选。下面是示例代码:
HTML:
```html
<label>
<input type="radio" name="radio1" id="radio1-1" value="option1" checked> Option 1
</label>
<label>
<input type="radio" name="radio1" id="radio1-2" value="option2"> Option 2
</label>
<br>
<label>
<input type="radio" name="radio2" id="radio2-1" value="option1" disabled> Option 1
</label>
<label>
<input type="radio" name="radio2" id="radio2-2" value="option2" disabled> Option 2
</label>
```
JavaScript:
```javascript
const radio1 = document.querySelectorAll('input[name="radio1"]');
const radio2 = document.querySelectorAll('input[name="radio2"]');
const toggleRadio2 = () => {
const radio2Disabled = radio2[0].disabled;
radio2[0].disabled = !radio2Disabled;
radio2[1].disabled = !radio2Disabled;
};
radio1[0].addEventListener('click', toggleRadio2);
radio1[1].addEventListener('click', toggleRadio2);
```
上面的代码中,首先获取了两组单选按钮的 DOM 元素。然后定义了一个名为 `toggleRadio2` 的事件处理函数,在该函数中获取了第二组单选按钮的 disabled 属性并进行取反操作,从而实现了控制第二组单选按钮是否可选的效果。最后,通过调用 `addEventListener` 方法向第一个单选按钮添加 click 事件监听器,从而在单选按钮被点击时调用 `toggleRadio2` 函数,实现了前端按钮控制的功能。
希望这个答案能够帮到你!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)