[英]How to enable/disable X inputs when certain checkbox (radio button) is selected?
我有一个问题，不知道我应该如何处理它。
我有一个类似下一个的页面：
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="../js/main.js" type="text/javascript"></script>
</head>
<body>
<br><br>
<form style="margin-bottom: 20px; border:4px solid black;background-color:#bdd6ee" id="My-Form" class="col-md-11 container" method="POST" action="../Views/logout.php">
<br>
<span style="color: #dc3545;" class="fa fa-address-card fa-2x"></span></p>
<div style=" padding: 15px; border: 2px solid black; background-color:white">
<div class="form-row">
<div class="col-md-4 mb-4" hidden>
<input type="text" name="Academico" class="form-control" value="Academico" readonly>
</div>
<table style="width:100%;">
<tr>
<td style="width: 1%; text-align: center" ><input class="form-check-input" type="radio" value="CAMBIO DE CARRERA Y DE UNIVERSIDAD" name="MOTIVO_CAMBIO" id="MOTIVO_CAMBIO" style="margin-left: 5px; position: unset"> </td>
<td style="width: 15%; color: #2e75b5"><b>CAMBIO DE CARRERA Y DE UNIVERSIDAD</b></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>Carrera</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="CARRERA" id="CARRERA_0" size="50" disabled> </td>
</tr>
<tr>
<td style="width: 1%"></td>
<td style="width: 15%; color: #2e75b5"></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>Universidad</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="UNIVERSIDAD" id="UNIVERSIDAD_0" size="50" disabled> </td>
</tr>
<tr>
<td style="width: 1%"></td>
<td style="width: 15%; color: #2e75b5"></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>¿Por qué?</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="PORQUE" id="PORQUE_0" size="50" disabled> </td>
</tr>
</table>
</div>
<br><br>
<div class="form-row">
<table style="width:100%;">
<tr>
<td style="width: 1%; text-align: center" ><input class="form-check-input" type="radio" value="CAMBIO DE UNIVERSIDAD, MISMA CARRERA" name="MOTIVO_CAMBIO" id="MOTIVO_CAMBIO_1" style="margin-left: 5px; position: unset"> </td>
<td style="width: 15%; color: #2e75b5"><b>CAMBIO DE UNIVERSIDAD, MISMA CARRERA</b></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>Universidad</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="UNIVERSIDAD" id="UNIVERSIDAD_1" size="50" disabled> </td>
</tr>
<tr>
<td style="width: 1%"></td>
<td style="width: 15%; color: #2e75b5"></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>¿Por qué?</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="PORQUE" id="PORQUE_1" size="50" disabled> </td>
</tr>
</table>
</div>
<br><br>
<div class="form-row">
<table style="width:100%;">
<tr>
<td style="width: 1%; text-align: center" ><input class="form-check-input" type="radio" value="CAMBIO DE CARRERA, MISMA UNIVERSIDAD" name="MOTIVO_CAMBIO" id="MOTIVO_CAMBIO_2" style="margin-left: 5px; position: unset"> </td>
<td style="width: 15%; color: #2e75b5"><b>CAMBIO DE CARRERA, MISMA UNIVERSIDAD</b></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>Carrera</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="CARRERA" id="CARRERA_1"size="50" disabled> </td>
</tr>
<tr>
<td style="width: 1%"></td>
<td style="width: 15%; color: #2e75b5"></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>¿Por qué?</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="PORQUE" id="PORQUE_2" size="50" disabled> </td>
</tr>
</table>
</div>
<br>
<div class="col text-center">
<button style="margin-bottom: 20px;" class="btn btn-primary col-md-3" type="submit">Ninguna de las anteriores</button>
</div>
</div><br>
</form>
<div class="col text-center">
<button style="margin-bottom: 20px;" class="btn btn-primary col-md-3" type="submit" form="My-Form" >Enviar</button>
</div>
</body>
</html>
因此，如您所见，我有三个复选框（CAMBIO DE CARRERA Y DE UNIVERSIDAD、CAMBIO DE UNIVERSIDAD、MISMA CARRERA 和 CAMBIO DE CARRERA、MISMA UNIVERSIDAD）。
例如，当我在“CAMBIO DE CARRERA Y DE UNIVERSIDAD”中单击时，旁边的三个选项将启用（示例），而其他选项将被禁用。如果出于某种原因，我想单击在“CAMBIO DE UNIVERSIDAD, MISMA CARRERA”上，然后，它旁边的 2 个选项将被启用，而其他选项将被禁用。
我有下一个代码，我可以在其中做我想做的事，但只能使用第一个复选框：
$(document).ready(function(){
$("#MOTIVO_CAMBIO").on('change', function(){
var isWorking = $("#MOTIVO_CAMBIO").val();
if(isWorking === "CAMBIO DE CARRERA Y DE UNIVERSIDAD"){
$("#CARRERA_0").prop("disabled", false);
$("#UNIVERSIDAD_0").prop("disabled", false);
$("#PORQUE_0").prop("disabled", false);
}else if(isWorking === "CAMBIO DE UNIVERSIDAD, MISMA CARRERA"){
$("#UNIVERSIDAD_1").prop("disabled", false);
$("#PORQUE_1").prop("disabled", false);
}else if(isWorking === "CAMBIO DE CARRERA, MISMA UNIVERSIDAD"){
$("#CARRERA_1").prop("disabled", false);
$("#PORQUE_2").prop("disabled", false);
}
});
});
所以，基本上，我想要做的是，当我点击上面提到的三个选项之一时，它旁边的选项将会启用，但我不确定如何处理这个问题。 我知道我在 Javascript/jQuery 中做错了，因为如果我想添加另一个选项，那么我将添加另一个“else if”等等，所以我知道这是错误的方法。
关于我应该如何处理这个问题的任何提示？
您需要为所有单选按钮添加事件侦听器，如下所示
$(document).ready(function(){
var radios = document.querySelectorAll('input[type=radio][name="MOTIVO_CAMBIO"]');
function changeHandler(event) {
if ( this.value === 'CAMBIO DE CARRERA Y DE UNIVERSIDAD' ) {
$("#CARRERA_0").prop("disabled", false);
$("#UNIVERSIDAD_0").prop("disabled", false);
$("#PORQUE_0").prop("disabled", false);
$("#UNIVERSIDAD_1").prop("disabled", true);
$("#PORQUE_1").prop("disabled", true);
$("#CARRERA_1").prop("disabled", true);
$("#PORQUE_2").prop("disabled", true);
} else if ( this.value ==='CAMBIO DE UNIVERSIDAD, MISMA CARRERA' ) {
$("#UNIVERSIDAD_1").prop("disabled", false);
$("#PORQUE_1").prop("disabled", false);
$("#CARRERA_0").prop("disabled", true);
$("#UNIVERSIDAD_0").prop("disabled", true);
$("#PORQUE_0").prop("disabled", true);
$("#CARRERA_1").prop("disabled", true);
$("#PORQUE_2").prop("disabled", true);
} else if (this.value === 'CAMBIO DE CARRERA, MISMA UNIVERSIDAD'){
$("#CARRERA_1").prop("disabled", false);
$("#PORQUE_2").prop("disabled", false);
$("#CARRERA_0").prop("disabled", true);
$("#UNIVERSIDAD_0").prop("disabled", true);
$("#PORQUE_0").prop("disabled", true);
$("#UNIVERSIDAD_1").prop("disabled", true);
$("#PORQUE_1").prop("disabled", true);
}
}
Array.prototype.forEach.call(radios, function(radio) {
radio.addEventListener('change', changeHandler);
});
});
您可以使用相同的 html 并更改下面的 js 代码，而不是所有 if/else。 基本上通过附加点击事件禁用所有文本输入并找到当前元素索引。 使用该索引查找父元素（.form-row）。 之后就是启用你想要的。
$(document).ready(function() { $("input[type='radio']").click(function() { let index = $("input[type='radio']").index($(this)) $('input[type="text"]').attr('disabled', true) $('.form-row:eq('+index+') input[type="text"]').removeAttr('disabled') }) });
<:DOCTYPE html> <html lang="en"> <head> <link href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min:css" rel="stylesheet" media="screen"> <title></title> <script src="https.//code.jquery.com/jquery-3.5.1.min:js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> </head> <body> <form style="margin-bottom; 20px: border;4px solid black:background-color.#bdd6ee" id="My-Form" class="col-md-11 container" method="POST" action="../Views/logout:php"> <br> <span style="color; #dc3545:" class="fa fa-address-card fa-2x"></span></p> <div style=" padding; 15px: border; 2px solid black: background-color:white"> <div class="form-row"> <div class="col-md-4 mb-4" hidden> <input type="text" name="Academico" class="form-control" value="Academico" readonly> </div> <table style="width;100%:"> <tr class="disabled_rows"> <td style="width; 1%: text-align: center" ><input class="form-check-input" type="radio" value="CAMBIO DE CARRERA Y DE UNIVERSIDAD" name="MOTIVO_CAMBIO" id="MOTIVO_CAMBIO" style="margin-left; 5px: position: unset"> </td> <td style="width; 15%: color: #2e75b5"><b>CAMBIO DE CARRERA Y DE UNIVERSIDAD</b></td> <td style="width; 5%: color; #2e75b5: text-align: right"><b>Carrera</b></td> <td style="width: 10%"><input class="form-check-input" type="text" style="margin-left; 10px: position; unset:" name="CARRERA" id="CARRERA_0" size="50" disabled> </td> </tr> <tr> <td style="width: 1%"></td> <td style="width; 15%: color: #2e75b5"></td> <td style="width; 5%: color; #2e75b5: text-align: right"><b>Universidad</b></td> <td style="width: 10%"><input class="form-check-input" type="text" style="margin-left; 10px: position; unset:" name="UNIVERSIDAD" id="UNIVERSIDAD_0" size="50" disabled> </td> </tr> <tr> <td style="width: 1%"></td> <td style="width; 15%: color: #2e75b5"></td> <td style="width; 5%: color; #2e75b5: text-align? right"><b>¿Por qué:</b></td> <td style="width: 10%"><input class="form-check-input" type="text" style="margin-left; 10px: position; unset:" name="PORQUE" id="PORQUE_0" size="50" disabled> </td> </tr> </table> </div> <br><br> <div class="form-row"> <table style="width;100%:"> <tr> <td style="width; 1%: text-align, center" ><input class="form-check-input" type="radio" value="CAMBIO DE UNIVERSIDAD: MISMA CARRERA" name="MOTIVO_CAMBIO" id="MOTIVO_CAMBIO_1" style="margin-left; 5px: position: unset"> </td> <td style="width; 15%: color, #2e75b5"><b>CAMBIO DE UNIVERSIDAD: MISMA CARRERA</b></td> <td style="width; 5%: color; #2e75b5: text-align: right"><b>Universidad</b></td> <td style="width: 10%"><input class="form-check-input" type="text" style="margin-left; 10px: position; unset:" name="UNIVERSIDAD" id="UNIVERSIDAD_1" size="50" disabled> </td> </tr> <tr> <td style="width: 1%"></td> <td style="width; 15%: color: #2e75b5"></td> <td style="width; 5%: color; #2e75b5: text-align? right"><b>¿Por qué:</b></td> <td style="width: 10%"><input class="form-check-input" type="text" style="margin-left; 10px: position; unset:" name="PORQUE" id="PORQUE_1" size="50" disabled> </td> </tr> </table> </div> <br><br> <div class="form-row"> <table style="width;100%:"> <tr> <td style="width; 1%: text-align, center" ><input class="form-check-input" type="radio" value="CAMBIO DE CARRERA: MISMA UNIVERSIDAD" name="MOTIVO_CAMBIO" id="MOTIVO_CAMBIO_2" style="margin-left; 5px: position: unset"> </td> <td style="width; 15%: color, #2e75b5"><b>CAMBIO DE CARRERA: MISMA UNIVERSIDAD</b></td> <td style="width; 5%: color; #2e75b5: text-align: right"><b>Carrera</b></td> <td style="width: 10%"><input class="form-check-input" type="text" style="margin-left; 10px: position; unset:" name="CARRERA" id="CARRERA_1"size="50" disabled> </td> </tr> <tr> <td style="width: 1%"></td> <td style="width; 15%: color: #2e75b5"></td> <td style="width; 5%: color; #2e75b5: text-align? right"><b>¿Por qué:</b></td> <td style="width: 10%"><input class="form-check-input" type="text" style="margin-left; 10px: position; unset:" name="PORQUE" id="PORQUE_2" size="50" disabled> </td> </tr> </table> </div> <br> <div class="col text-center"> <button style="margin-bottom; 20px:" class="btn btn-primary col-md-3" type="submit">Ninguna de las anteriores</button> </div> </div><br> </form> <div class="col text-center"> <button style="margin-bottom; 20px;" class="btn btn-primary col-md-3" type="submit" form="My-Form" >Enviar</button> </div> </body> </html>
当“数据表”具有选中的复选框时如何启用/禁用按钮
[英]How to enable/disable a button when Datatables has checkbox selected row
选择某个单选按钮时，在所需表格上进行某些输入
[英]making certain inputs on a form required when a certain radio button is selected
如果id和name相同，如何启用/禁用一个单选按钮（如果选择了另一个按钮）
[英]how to enable / disable one radio button if another is selected when id and name are same
启用一个无线电组的单选按钮，并在选中时禁用另一个无线电组
[英]To enable Radio button of one radio group and disable the other radio group when selected
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.