Jquery set checkbox checked if value passed to modal = 1

I'm currently working on an admin panel, where via check boxes the user gets rights. The data is being passed from my main view to a modal via js script with the data-method. What I'm having trouble with is, when the value passed to the checkbox is 1 (Admin right given) the checkbox should be checked, but it isn't. I've checked if the value is being passed right to the modal, by changing the input to text, where I can see the right value

What I would like to achieve: when the value from the DB on my main view is passed to my modal, the check boxes whose value is 1 are checked and the other ones (value=0) are not checked. Also, that this doesn't affect my ability to edit the rights of the user.

This is the approach that I've tried:


    <!-- Send Data to modal -->
   <script type="text/javascript">
    $('#edit').on('show.bs.modal', function(event) {
      var button = $(event.relatedTarget); // Button that triggered the modal
      var id = button.data('id'); // Extract info from data-* attributes
      var admin = button.data('admin');
      var expert = button.data('expert');
      var modal = $(this);
      $('#edit_form').attr('action', '{{URL::to('/')}}/AdminPanel/'+id); //No spaces!!!
      modal.find('#admin_field').val(admin);
      modal.find('#expert_field').val(expert);
    });
    </script>

    <!-- Modal -->
    <div class="form-group row">
      <div class="col-xs-8 col-sm-7 col-md-6">
        <label for="admin_field" class="col-md-4 col-form-label text-md-right">{{ __('Admin?') }}
          <input id="admin_field" type="checkbox" class="w3-check" name="Admin">
        </label>
      </div>
    </div>
      <script type="text/javascript">
      $( document ).ready(function() {
        // auto check checkbox if value == 1
        $('.w3-check').each(function(e){
            if($(this).val() == 1){
                $(this).prop("checked", true);
            }
        });
        // Checkbox instead of on:off 1:0
        $('input:checkbox').on('change', function(){
          this.value = this.checked ? 1 : 0;
        }).change();
      });

      </script>

Any kind of help is much appreciated!

Snapey

6 years ago

Level 122

Your checkbox value can be always=1. You need to change the attribute 'checked' which I can see you are trying to do in javascript, but this code runs when the page is first loaded, not when you push the button

1 like

matilarab

6 years ago

Level 1

I just changed my function to:

        $('.w3-check').click().each(function(e){
            if($(this).val() == 1){
                $(this).prop("checked", true);
            }
        });

and it did the trick, but now all of them are checked even though the val of some is 0, any suggestions to solve that?

Snapey

6 years ago

Level 122

You need to target the element that needs to change. The value if the checkbox is not relevant until the firm is submitted and can be hardcoded to 1 all the time.

Snapey

6 years ago

Best Answer

Level 122

set the prop here

modal.find('#admin_field').val(admin);

not the value

1 like

Please or to participate in this conversation.