marcar y desmarcar option dinamicamente

publicado por: Anonymous

estoy trabajando con los dias de la semana tengo 7 checkbox (jornada laboral) de lunes a domingo y 7 de igual manera de lunes a domingo pero esto los ocupo para saber los dias de descanso

si por ejemplo su jornada laboral del usuario lunes a viernes se selecciona los checkbox de jornada laboral y los checkbox de sabado y domingo se seleccionan de descanso, los checkbox que no selecciona de jornada laboral son los dias que va a descansar.

lunes,martes,miercoles,jueves,viernes jornada laboral
sabado,domingo descanso

si desmarca martes de jornada laboral se habilita martes descanso cambiaria a esto
lunes,miercoles,jueves,viernes jornada laboral
martes,sabado,domingo descanso

hasta aqui todo bien

el problema empieza aqui tengo un select multiple los dias de jornada laboral quiero que se vayan agregando al select o viceversa que se quiten

lunes
miercoles
jueves
viernes

este es mi codigo

<div class="form-group col-md-6">
                <label>Jornada</label><br>
                <label>
                  <input type="checkbox" class="flat-red"  value="lunes" name="lunes" checked id="lunes">
                  Lun
                </label>
                <label>
                  <input type="checkbox" class="flat-red" value="martes" name="martes" checked id="martes">
                  Mar
                </label>
                <label>
                  <input type="checkbox" class="flat-red" value="miercoles" name="miercoles" checked id="miercoles">
                  Mie
                </label>
                <label>
                  <input type="checkbox" class="flat-red" value="jueves" name="jueves" checked id="jueves">
                  Jue
                </label>
                <label>
                  <input type="checkbox" class="flat-red" value="viernes" name="viernes" checked id="viernes">
                  Vie
                </label>
                <label>
                  <input type="checkbox" class="flat-red" value="sabado" name="sabado"  id="sabado" >
                  Sab
                </label>
                <label>
                  <input type="checkbox" class="flat-red" value="domingo" name="domingo"  id="domingo">Dom
                </label>
              </div>
              <div class="form-group col-md-6">
                <label>Descanso</label><br>
                <label>
                  <input type="checkbox" class="flat-red" value="lunesDescanso" name="lunesDescanso" id="lunesDescanso" disabled>Lun
                </label>
                <label>
                  <input type="checkbox" class="flat-red" value="martesDescanso" name="martesDescanso" id="martesDescanso" disabled>
                  Mar
                </label>
                <label>
                  <input type="checkbox" class="flat-red" value="miercolesDescanso" name="miercolesDescanso" id="miercolesDescanso" disabled>
                  Mie
                </label>
                <label>
                  <input type="checkbox" class="flat-red" value="juevesDescanso" name="juevesDescanso" id="juevesDescanso" disabled>
                  Jue
                </label>
                <label>
                  <input type="checkbox" class="flat-red" value="viernesDescanso" name="viernesDescanso" id="viernesDescanso" disabled>
                  Vie
                </label>
                <label>
                  <input type="checkbox" class="flat-red" value="sabadoDescanso" name="sabadoDescanso" checked id="sabadoDescanso" disabled>
                  Sab
                </label>
                <label>
                  <input type="checkbox" class="flat-red" value="domingoDescanso" name="domingoDescanso" checked id="domingoDescanso" disabled>
                  Dom
                </label>
              </div>
<div class="form-group col-md-5">
                <label class="control-label">Dias trabajdos</label>
                <select class="form-control input-sm selectpicker" multiple name="Datos[]" data-error="Es un campo obligatorio" required="required" id="diasTrabajados" readonly>
                  <option value="1">lunes</option>
                  <option value="2" selected="selected">martes</option>
                  <option value="3" selected="selected">miercoles</option>
                  <option value="4" selected="selected">jueves</option>
                  <option value="5" selected="selected">viernes</option>
                  <option value="6" disabled="disabled">sabado</option>
                  <option value="7" disabled="disabled">domingo</option>
                </select>
              </div>

$('#lunes').on('change', function() {
            if ($(this).is(':checked') ) {
                $("#lunesDescanso").prop('checked', false);
                console.log('aa'); 
            } else {
                $("#lunesDescanso").prop('checked', true);
                console.log('bb');

            }
        });
        $('#martes').on('change', function() {
            if ($(this).is(':checked') ) {
                $("#martesDescanso").prop('checked', false); 
            } else {
                $("#martesDescanso").prop('checked', true);
            }
        });
        $('#miercoles').on('change', function() {
            if ($(this).is(':checked') ) {
                $("#miercolesDescanso").prop('checked', false);
            } else {
                $("#miercolesDescanso").prop('checked', true);
            }
        });
        $('#jueves').on('change', function() {
            if ($(this).is(':checked') ) {
                $("#juevesDescanso").prop('checked', false);
            } else {
                $('#juevesDescanso').prop('checked', true);
            }
        });
        $('#viernes').on('change', function() {
            if ($(this).is(':checked') ) {
                $("#viernesDescanso").prop('checked', false);
            } else {
                $('#viernesDescanso').prop('checked', true);
            }
        });
        $('#sabadoDescanso').on('change', function() {
            if ($(this).is(':checked') ) {
                $("#sabado").prop('checked', false);
            } else {
                $('#sabado').prop('checked',true);
            }
        });
        $('#domingoDescanso').on('change', function() {
            if ($(this).is(':checked') ) {
                $("#domingo").prop('checked', false); 
            } else {
                $('#domingo').prop('checked',true);
            }
        });

lo intente haci pero no me funciono

$('#martes').on('change', function() {
                if ($(this).is(':checked') ) {
                    $("#martesDescanso").prop('checked', false);
                    $("#diasTrabajados option[value='1']").prop("selected", true); 
                } else {
                    $("#martesDescanso").prop('checked', true);
                }
            });

solución

aqui dejo la solucion se agrega el selectpicker(“refresh”) a cada if o no se actualiza el select

$('#lunes').on('change', function() {
                if ($(this).is(':checked') ) {
                    $("#lunesDescanso").prop('checked', false);
                    $("#diasTrabajados option[value='1']").prop("selected", true);
                } else {
                    $("#lunesDescanso").prop('checked', true);
                    $("#diasTrabajados option[value='1']").prop("selected", false);
                }
                $("#diasTrabajados").selectpicker("refresh");
            });
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *