[英]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.