dial and uncheck option dynamically

Navigation
0

I am working with the days of the week I have 7 checkbox (workday) from Monday to Sunday and 7 in the same way from Monday to Sunday but this I occupy to know the rest days

If, for example, the user's workday, Monday through Friday, the workday checkbox is selected and the Saturday and Sunday checkboxes are selected for rest, the checkboxes that do not select the workday are the days that he will rest.

Monday, Tuesday, Wednesday, Thursday, Friday working day Saturday, Sunday rest

If you uncheck Tuesday working hours is enabled Tuesday rest exchange to this Monday, Wednesday, Thursday, Friday working day Tuesday, Saturday, Sunday rest

up here all right

The problem starts here I have a multiple select days of work I want to be added to the select or vice versa to be removed

Monday Wednesday Thursday Friday

this is my code 

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

I tried to do it but it did not work for me 

$('#martes').on('change', function() {
                if ($(this).is(':checked') ) {
                    $("#martesDescanso").prop('checked', false);
                    $("#diasTrabajados option[value='1']").prop("selected", true); 
                } else {
                    $("#martesDescanso").prop('checked', true);
                }
            });
    
asked by Carlos Enrique Gil Gil 30.11.2017 в 23:20
source

2 answers

1

here I leave the solution the selectpicker ("refresh") is added to each if or the select is not updated 

$('#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");
            });
    
answered by 04.12.2017 / 17:50
source
1

Since you are using the selectpicker of Bootstrap you have to check / uncheck the values as required by the library in your documentation

I leave the functional example, you must have the account the changes that I made in your structure HTML 

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

    cambiarSelect();
});

$('#martes').on('change', function() {
    if ($(this).is(':checked') ) {
        $("#martesDescanso").prop('checked', false); 
    } else {
        $("#martesDescanso").prop('checked', true);
    }

    cambiarSelect();
});

$('#miercoles').on('change', function() {
    if ($(this).is(':checked') ) {
        $("#miercolesDescanso").prop('checked', false);
    } else {
        $("#miercolesDescanso").prop('checked', true);
    }

    cambiarSelect();
});

$('#jueves').on('change', function() {
    if ($(this).is(':checked') ) {
        $("#juevesDescanso").prop('checked', false);
    } else {
        $('#juevesDescanso').prop('checked', true);
    }

    cambiarSelect();
});

$('#viernes').on('change', function() {
    if ($(this).is(':checked') ) {
        $("#viernesDescanso").prop('checked', false);
    } else {
        $('#viernesDescanso').prop('checked', true);
    }

    cambiarSelect();
});

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

function cambiarSelect(){
    var seleccionados = $(".jornada input[type='checkbox']:checked");

    var valores = [];

    for(var i = 0; i < seleccionados.length; i++){
        valores.push($(seleccionados[i]).val());
    }

    $('.selectpicker').selectpicker('val', valores);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

<div class="form-group col-md-6 jornada">
    <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="lunes" selected="selected">lunes</option>
        <option value="martes" selected="selected">martes</option>
        <option value="miercoles" selected="selected">miercoles</option>
        <option value="jueves" selected="selected">jueves</option>
        <option value="viernes" selected="selected">viernes</option>
        <option value="sabado" disabled="disabled">sabado</option>
        <option value="domingo" disabled="disabled">domingo</option>
    </select>
</div>
    
answered by 30.11.2017 в 23:31
Listview show two fields in each row Adding a home page with django