Question

我有一个带有两个按钮和一个复选框的表单，我希望当用户选中复选框时，其中一个按钮被启用而另一个按钮被禁用。因此，当表单加载时，默认情况下将启用，另一个禁用，但在选中复选框后，另一个启用，而默认情况下启用的功能将被禁用..

我实际上可以为一个按钮执行此操作，但我可以为两个按钮执行此操作，请有javascript技能的人帮助我在这里感谢。

Answer 1

你可以用JQuery做到这一点。试试下面的代码：

＆＃13;

$('document').ready(function() {
  $('.checkbox_check').change(function() {
    var isChecked = $('.checkbox_check').is(':checked');
    $('#btn1').prop('disabled', !isChecked);
    $('#btn2').prop('disabled', isChecked);
  });
})

＆＃13;

<button type="button" id='btn1' disabled>Button 1</button>
<button type="button" id='btn2'>Button 2</button>
<input type="checkbox" class='checkbox_check' />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

<强>更新

根据下面的评论，这是一个Vanilla JS解决方案：

＆＃13;

function toggleDisabled() {
  var isChecked = document.getElementById("checkbox_check").checked;

  document.getElementById('btn1').disabled = !isChecked;
  document.getElementById('btn2').disabled = isChecked;
}

＆＃13;

<button type="button" id="btn1" disabled>Button 1</button>
<button type="button" id="btn2">Button 2</button>
<input type="checkbox" id="checkbox_check" onChange="toggleDisabled()" />

＆＃13;

Answer 2

你可以用Vanilla JS实现这个目标

＆＃13;

function fireChange() {
  const button1 = document.getElementById('test1');
  const button2 = document.getElementById('test2');
  button1.disabled = !button1.disabled;
  button2.disabled = !button2.disabled;
}

＆＃13;

<button disabled id="test1"> first button </button>
<button id="test2"> second button </button>
<input type="checkbox" onChange="fireChange()" />

＆＃13;

是否可以使用复选框控制两个按钮状态

2 个答案: