Tengo un problema al marcar solo una casilla de verificación ... Probé dos tipos de código JS ... Pero no funciona ... Para verificar por clase, cuando hace clic en un elemento con clase 'lista de productos' para anular la selección otro... ¿Alguien tiene idea de cómo solucionar esto?
HTML:
<div class="mg-toolbar"> <div class="mg-option checkbox-custom checkbox-inline"> <input class="product-list" type="checkbox" name="PDF" value="<?php echo $file_name; ?>"> <label for="file_1">SELECT</label> </div> </div>Prueba JS 1:
<script type="text/javascript"> $('.product-list').click(function() { $(this).siblings('input:checkbox').prop('checked', false); ); </script>Prueba JS 2:
<script type="text/javascript"> $('.product-list').on('change', function() { $('.product-list').not(this).prop('checked', false); }); </script>Si desea asegurarse de que solo se seleccione un elemento a la vez, entonces en realidad para eso se inventaron los botones de opción (en lugar de las casillas de verificación). Y no necesita ningún código JS para que funcione.
Manifestación:
<div class="mg-toolbar"> <div class="mg-option checkbox-custom checkbox-inline"> <input class="product-list" id="file_1" type="radio" name="PDF" value="File1"> <label for="file_1">SELECT 1</label> </div> <div class="mg-option checkbox-custom checkbox-inline"> <input class="product-list" id="file_2" type="radio" name="PDF" value="File2"> <label for="file_2">SELECT 2</label> </div> <div class="mg-option checkbox-custom checkbox-inline"> <input class="product-list" id="file_3" type="radio" name="PDF" value="File3"> <label for="file_3">SELECT 3</label> </div> <div class="mg-option checkbox-custom checkbox-inline"> <input class="product-list" id="file_4" type="radio" name="PDF" value="File4"> <label for="file_4">SELECT 4</label> </div> </div>cambie #c01 y #c02 a las dos ID de casilla de verificación con las que está haciendo esto. Creo que esto puede hacer lo que necesitas que haga. Si se marca c01, se desmarca c02 y viceversa
$("#c01").click(function(){ if($("#c01").is(':checked')) $("#c02").prop("checked", false); }); $("#c02").click(function(){ if($("#c02").is(':checked')) $("#c01").prop("checked", false); });