Я изо всех сил пытался сделать это как можно более повторным. Я написал это так, что если я поставлю идентификаторы как целевого набора полей и флажок ввода, это работает. Тем не менее, у меня есть несколько элементов формы, которые должны действовать одинаково, поэтому это не лучший способ справиться с этим.
Когда пользователь включает или отключает переключатель флажка, тогда я хочу следующее поле формы, чтобы отключить или включить соответственно. Я пробовал несколько разных способов выполнить sh и очистил свой javascript, основываясь на предложениях в других темах, но когда я пытаюсь активировать переключатель, я получаю ошибку ниже. Любая помощь будет удивительной!
form_enable. js: 2 Uncaught TypeError: Невозможно установить свойство 'disabled' для null в enable_disable (form_enable. js: 2) в HTMLInputElement.onchange (Trim .htm: 11)
Мой урезан HTML:
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="form-group custom-control custom-switch">
<input class="custom-control-input" type="checkbox" name="report_url_active" id="report_url_active_yes" onchange="enable_disable(report_url_disable_fieldset,report_url_active_yes)">
<label class="custom-control-label" for="report_url_active_yes">Will you need a report?</label>
</div>
<div class="container">
<fieldset disabled id="report_url_disable_fieldset"> <!-- Enable if report_url_active_yes is checked -->
<div class="form-group form-inline">
<label class="form-control-label" for="report_url">Reports URL</label>
<input class="form-control" type="text" id="report_url">
</div>
</fieldset>
</div>
</div>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/form_enable.js"></script>
</body>
И мой form_enable. js Файл:
function enable_disable(target_id,check_id) {
document.getElementById(target_id).disabled = !check_id.checked;
}