Как включить / отключить входы X, когда установлен определенный флажок (переключатель)? - PullRequest
Новая
       14

Как включить / отключить входы X, когда установлен определенный флажок (переключатель)?

0 голосов
/ 05 августа 2020

У меня проблема, и я не знаю, как к ней подойти.

У меня есть страница, подобная следующей: 

<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» и так далее, поэтому я знаю, что это неправильный подход.

Есть какие-нибудь подсказки, как мне подойти к этому?

Ответы [ 2 ]

1 голос
/ 05 августа 2020

вам необходимо добавить прослушиватели событий для всех ваших переключателей, как показано ниже 

$(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);
    });

});
0 голосов
/ 05 августа 2020

Вместо всех if / else вы можете использовать тот же html и измененный код js ниже. В основном, прикрепив событие щелчка, отключите все текстовые вводы и найдите текущий индекс элементов. С помощью этого индекса найдите родительский элемент (.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...