是否有可能有一個複選框控制兩個按鈕狀態

Question

我有一個窗體有兩個按鈕和一個複選框，我想當用戶檢查複選框時，其他按鈕被禁用時啓用其中一個按鈕。因此，當表單加載一個將默認啓用，另一個禁用，但複選框已勾選後，其他變爲啓用，而默認情況下啓用的其他變爲禁用。

我實際上可以爲一個按鈕但我可以做到這一點的兩個按鈕，請有javascript技能的人可以幫我在這裏謝謝。

Answer 1

你可以用JQuery做到這一點。試試下面的代碼片段：

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

<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>

更新：

每下面的評論，這裏的香草JS的解決方案：

function toggleDisabled() { 
 
    var isChecked = document.getElementById("checkbox_check").checked; 
 

 
    document.getElementById('btn1').disabled = !isChecked; 
 
    document.getElementById('btn2').disabled = isChecked; 
 
}

<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()" />

Answer 2

你可以用香草JS實現這一

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

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