Me gustaría mostrar 2 casillas de verificación en mi página (llamadas box1 y box2 ). El valor predeterminado es box1 = false y box2 = false . Pero también tengo que habilitar box2 solo si box1 = true . Así que he creado la siguiente función JS:
function myTest() { var check = document.getElementById('box1'); if (check.checked == false) { $('#box2').prop('disabled', true); } else { $('#box2').prop('disabled', false); } } Ahora realmente no entiendo cómo usar la función myTest en el archivo JSP. Intenté usarlo con onload="myTest()" de la siguiente manera, pero no funciona ( box2 siempre está deshabilitado).
<body onload="myTest()" /> <div class="form-group row"> <label class="col-sm-3 col-form-label required"> <s:text name="box1" /> </label> <div class="col-sm-9"> <s:checkbox id="box1" name="box1"> </s:checkbox> </div> </div> <div class="form-group row"> <label class="col-sm-3 col-form-label required"> <s:text name="box2" /> </label> <div class="col-sm-9"> <s:checkbox id="box2" name="box2"></s:checkbox> </div> </div>Hay un atributo onchange para la etiqueta <s:checkbox> que se usa para
Establezca el atributo html onchange en el elemento html representado
Esta etiqueta genera un campo de entrada simple de tipo checkbox de verificación.
Representa un elemento de entrada HTML de tipo
checkboxde verificación, rellenado por la propiedad especificada deValueStack.
El bean de acción está encima de ValueStack , por lo que puede obtener la propiedad especificada allí.
Para definir la función JS en JSP, debe usar la etiqueta html <script> . Puede hacerlo en la etiqueta <head> o después del elemento renderizado.
<s:checkbox id="box1" name="box1" onchange="myTest()"/> <s:checkbox id="box2" name="box2" %{box1?'':'disabled="disabled"'}/> <script> function myTest() { if ($(this).prop("checked") === "checked") { $("#box2").removeAttr("disabled"); } else { $("#box2").attr("disabled","disabled"); } } </script>Parece que estás usando jQuery en la página. Aquí está mi solución.
<script type="text/javascript"> $( document ).ready(function() { // on page load unchecking and disabling box2 $("#box2").prop("checked", false); $("#box2").prop("disabled", true); }); $("#box1").on("change", function(){ if ($(this).prop("checked")){ // box1 is checked $("#box2").prop("disabled", false); } else{ // box1 is not checked $("#box2").prop("checked", false); $("#box2").prop("disabled", true); } }); </script>