我要用HTML做一个问卷调查，其中一个问题代码不会

问题，举个例子吧：
你是否会横穿马路？
1.会，原因有以下几种：
A.原因1
B.原因2
2.不会，原因有以下几种：
C.原因1
D.原因2
我自己能做到把单选框多选框都做出来，但是当我选中1的时候，2中的复选框也可以点击，我想解决，如何在点击1之后，只能点击1中的俩个原因，2中的原因不能点击

思路
点击会，就设置不会的原因disabble 为true,让其不能选择；反之；
效果

img

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".js-hui").click(function(){
      //点击会，设置不会的原因不能选择
      document.getElementById('hyy1').disabled = false;
      document.getElementById('hyy2').disabled = false;
      document.getElementById('bhyy1').disabled = true;
      document.getElementById('bhyy2').disabled = true;
  });
  $(".js-buhui").click(function(){
      //点击不会，设置会的原因不能选择
      document.getElementById('hyy1').disabled = true;
      document.getElementById('hyy2').disabled = true;
      document.getElementById('bhyy1').disabled = false;
      document.getElementById('bhyy2').disabled = false;
  });
});
</script>
</head>
<body>

    <p>你是否会横穿马路？</p>
    <p>
        <input type="radio" name="vehicle" value="会" class="js-hui">会<br>
        <p>
            <input type="checkbox" name="vehicle" value="原因1"  id="hyy1">原因1<br>
            <input type="checkbox" name="vehicle" value="原因2"  id="hyy2">原因2
        </p>
    </p>
    <p>
        <input type="radio" name="vehicle" value="会" class="js-buhui">不会<br>
        <p>
            <input type="checkbox" name="vehicle" value="原因1"  id="bhyy1">原因1<br>
            <input type="checkbox" name="vehicle" value="原因2" id="bhyy2">原因2
        </p>
    </p>

</body>
</html>



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

</style>

<body>
    会<input type="radio" name="gml" value="type1" onchange="change()">
    原因1<input type="checkbox" name="type1" value="value1" disabled>
    原因2<input type="checkbox" name="type1" value="value2" disabled>
    不会<input type="radio" name="gml" value="type2" onchange="change()">
    原因1<input type="checkbox" name="type2" value="value3" disabled>
    原因2<input type="checkbox" name="type2" value="value4" disabled>
</body>
<script>
    const change = () => {
        document.querySelectorAll(`input[name*='type']`).forEach(input => {
            input.setAttribute('disabled', '')
        })
        document.querySelectorAll(`input[name='${event.target.value}']`).forEach(input => {
            input.removeAttribute('disabled')
        })
    }
</script>

</html>