如何勾選複選框後啓用單選按鈕？

Question

基本上，我有一個複選框有2個單選按鈕（默認情況下禁用），我想在複選框被選中時啓用它們。我如何使用JavaScript做到這一點？

Answer 1

試試這一個用JavaScript

function changeThis(sender) { 
 
    if(document.getElementById('chkbx').checked){ 
 
    document.getElementById("first").removeAttribute('disabled'); 
 
    document.getElementById("second").removeAttribute('disabled'); 
 
    } 
 
    else{ 
 
    document.getElementById("first").disabled = true; 
 
    document.getElementById("second").disabled = true; 
 
    } 
 
}

<input type="checkbox" id="chkbx" onchange="changeThis(this)" /> 
 
<input type="radio" name="receipt" id="first" disabled /> 
 
<input type="radio" name="receipt" id="second" disabled />

Answer 2

根據複選框的選中狀態啓用/禁用單選按鈕。

$('input[type=checkbox]').change(function() { 
 
    if($('#myCheck').is(':checked')) { 
 
     $('input[type=radio]').prop('disabled', false); 
 
    } 
 
    else{ 
 
     $('input[type=radio]').prop('disabled', 'disabled'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="test" id="myCheck">Click to Enable Disable <br> 
 
<input type="radio" name="gender" value="Male" disabled="disabled">Male<br> 
 
<input type="radio" name="gender" value="Female" disabled="disabled">Female<br>

Answer 3

在jQuery：

$("#mycheckbox").change(function(){ 
    if($(this).checked) 
     $("#myradiobutton").disabled(false); 
}); 

注意#mycheckbox和#myradiobutton是TBE DOM元素的id。

Answer 4

您也可以使用三元運算：

function myFunction() { 
 
document.getElementById('checkBox').checked ? 
 
(
 
document.getElementById("1").disabled = false, 
 
document.getElementById("2").disabled = false 
 
):(
 
document.getElementById("1").disabled = true, 
 
document.getElementById("2").disabled = true 
 
) 
 
; 
 
    
 
}

CheckBox<input type="checkbox" id="checkBox" onchange="myFunction(this)" /> 
 
<br> 
 
Radio 1<input type="radio" id="1" disabled /> 
 
<br> 
 
Radio 2<input type="radio" id="2" disabled />