Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to open a bootstrap modal when checked a chec-box (when a tick is placed on a check box)

I've a custom checkbox. What I want is to to open a bootstrap modal when the checkbox is checked. I want a bootstrap modal to open just as when clicked a button. Hope you understood my question. How can I do it.

HTML CODE

/*
          ----------------------------------------------
                              CHECKBOX
          ----------------------------------------------
*/


/* Base for label styling */

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}


/* checkbox aspect */

[type="checkbox"]:checked+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0px;
  width: 20px;
  height: 20px;
  //border: 1px solid #aaa;
  background: #09ad7e;
  border-radius: 3px;
  //box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}

[type="checkbox"]:not(:checked)+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0px;
  width: 20px;
  height: 20px;
  //border: 1px solid #fff;
  background: #eee;
  border-radius: 3px;
  //box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}


/* checked mark aspect */

[type="checkbox"]:checked+label:after {
  content: '✔';
  position: absolute;
  top: 0;
  left: 4px;
  font-size: 14px;
  color: #f8f8f8;
  transition: all .2s;
}

[type="checkbox"]:not(:checked)+label:after {
  content: '✔';
  position: absolute;
  top: 0;
  left: 4px;
  font-size: 14px;
  color: #ddd;
  transition: all .2s;
}


/* checked mark aspect changes */

[type="checkbox"]:not(:checked)+label:after {
  opacity: 1;
  transform: scale(1);
}

[type="checkbox"]:checked+label:after {
  opacity: 1;
  transform: scale(1);
}


/* disabled checkbox */

[type="checkbox"]:disabled:not(:checked)+label:before,
[type="checkbox"]:disabled:checked+label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}

[type="checkbox"]:disabled:checked+label:after {
  color: #999;
}

[type="checkbox"]:disabled+label {
  color: #aaa;
}


/* accessibility */

[type="checkbox"]:checked:focus+label:before,
[type="checkbox"]:not(:checked):focus+label:before {
  outline: none !important;
}


/* hover style just for information */

label:hover:before {
  //border: 1px solid #4778d9!important;
}

[type="checkbox"]:not(:checked)+label {
  color: #ddd;
}
<input type="checkbox" id="test7" checked="checked" />
<label for="test7">Custom Avalability</label>
<br /><br />
<input type="checkbox" id="test6" />
<label for="test6">Manual</label>
like image 744
Firnas Avatar asked Apr 20 '15 04:04

Firnas


People also ask

How do I pre check a checkbox?

You can code a checkbox to be pre-selected when the page loads using the checked boolean attribute. You simply have to add the word checked within the opening tag of the input element.

What is the value of checkbox when checked?

It has a boolean value which returns true if the checkbox is checked by default, otherwise returns false.

How do I use a checkbox tag?

The <input type="checkbox"> defines a checkbox. The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices.


2 Answers

You can check if input is checked on change of input[type="checkbox"] and show the modal.

$('input[type="checkbox"]').on('change', function(e){
   if(e.target.checked){
     $('#myModal').modal();
   }
});
      /*
      ----------------------------------------------
                          CHECKBOX
      ----------------------------------------------
      */
      /* Base for label styling */
      [type="checkbox"]:not(:checked),
      [type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
      }
      [type="checkbox"]:not(:checked) + label,
      [type="checkbox"]:checked + label {
        position: relative;
        padding-left: 25px;
        cursor: pointer;
      }

      /* checkbox aspect */

      [type="checkbox"]:checked + label:before {
        content: '';
        position: absolute;
        left:0; top: 0px;
        width: 20px; height: 20px;
        //border: 1px solid #aaa;
        background: #09ad7e;
        border-radius: 3px;
        //box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
      }
      [type="checkbox"]:not(:checked) + label:before {
      content: '';
        position: absolute;
        left:0; top: 0px;
        width: 20px; height: 20px;
        //border: 1px solid #fff;
        background: #eee;
        border-radius: 3px;
        //box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
      }
      /* checked mark aspect */

      [type="checkbox"]:checked + label:after {
        content: '✔';
        position: absolute;
        top: 0; left: 4px;
        font-size: 14px;
        color: #f8f8f8;
        transition: all .2s;
      }
      [type="checkbox"]:not(:checked) + label:after {
      content: '✔';
        position: absolute;
        top: 0; left: 4px;
        font-size: 14px;
        color: #ddd;
        transition: all .2s;

      }
      /* checked mark aspect changes */
      [type="checkbox"]:not(:checked) + label:after {
        opacity: 1;
        transform: scale(1);
      }
      [type="checkbox"]:checked + label:after {
        opacity: 1;
        transform: scale(1);
      }
      /* disabled checkbox */
      [type="checkbox"]:disabled:not(:checked) + label:before,
      [type="checkbox"]:disabled:checked + label:before {
        box-shadow: none;
        border-color: #bbb;
        background-color: #ddd;
      }
      [type="checkbox"]:disabled:checked + label:after {
        color: #999;
      }
      [type="checkbox"]:disabled + label {
        color: #aaa;
      }
      /* accessibility */
      [type="checkbox"]:checked:focus + label:before,
      [type="checkbox"]:not(:checked):focus + label:before {
       outline: none !important;
      }

      /* hover style just for information */
      label:hover:before {
        //border: 1px solid #4778d9!important;
      }

      [type="checkbox"]:not(:checked) + label {
      color: #ddd;
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<input type="checkbox" id="test7" checked="checked"/>
<label for="test7">Custom Avalability</label>
<br /><br />
<input type="checkbox" id="test6"/>
<label for="test6">Manual</label>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Checkbox is checked
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
like image 152
anpsmn Avatar answered Nov 09 '22 00:11

anpsmn


Here is the JS fiddle. let me know if you want anymore changes in it.

http://jsfiddle.net/k3aogpv0/5/

with simple custom data attribute:

 <input type="checkbox" id="test7" checked="checked" data-toggle="modal" data-target="#myModal" />

OR with Javascript if you doesn't want on unchecked

 ​$("[id^=test]").on("change", function(e){
    if(e.target.checked){
    $('#myModal').modal();
  }
 });
like image 23
Afsar Avatar answered Nov 09 '22 00:11

Afsar