kewang/1.htm

## 1.htm
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(function () {
        $("input[name=drone]").on("change", function () {
          var val = $("input[name=drone]:checked").val();

          if (val === "louie") {
            $("#aaa").attr("required", true);
          } else {
            $("#aaa").attr("required", false);
          }

          if (val === "dewey") {
            $("#bbb").attr("required", true);
          } else {
            $("#bbb").attr("required", false);
          }
        });
      });
    </script>
    <style>
      p,
      label {
        font: 1rem "Fira Sans", sans-serif;
      }

      input {
        margin: 0.4rem;
      }
    </style>
  </head>
  <body>
    <form id="form" action="">
      <input type="text" id="bbb" />

      <p>Select a maintenance drone:</p>

      <div>
        <input type="radio" id="huey" name="drone" value="huey" checked />
        <label for="huey">Huey</label>
      </div>

      <div>
        <input type="radio" id="dewey" name="drone" value="dewey" />
        <label for="dewey">Dewey</label>
      </div>

      <div>
        <input type="radio" id="louie" name="drone" value="louie" />
        <label for="louie">Louie</label>
        <input type="text" id="aaa" />
      </div>

      <input id="btnSubmit" type="submit" />
    </form>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
	$(function () {
	$("input[name=drone]").on("change", function () {
	var val = $("input[name=drone]:checked").val();

	if (val === "louie") {
	$("#aaa").attr("required", true);
	} else {
	$("#aaa").attr("required", false);
	}

	if (val === "dewey") {
	$("#bbb").attr("required", true);
	} else {
	$("#bbb").attr("required", false);
	}
	});
	});
	</script>
	<style>
	p,
	label {
	font: 1rem "Fira Sans", sans-serif;
	}

	input {
	margin: 0.4rem;
	}
	</style>
	</head>
	<body>
	<form id="form" action="">
	<input type="text" id="bbb" />

	<p>Select a maintenance drone:</p>

	<div>
	<input type="radio" id="huey" name="drone" value="huey" checked />
	<label for="huey">Huey</label>
	</div>

	<div>
	<input type="radio" id="dewey" name="drone" value="dewey" />
	<label for="dewey">Dewey</label>
	</div>

	<div>
	<input type="radio" id="louie" name="drone" value="louie" />
	<label for="louie">Louie</label>
	<input type="text" id="aaa" />
	</div>

	<input id="btnSubmit" type="submit" />
	</form>
	</body>
	</html>