Jquery Detect Bootstrap 3 State

jQuery detect Bootstrap 3 state

I made some changes to this for bootstrap 3, try this"

function findBootstrapEnvironment() {
    var envs = ["ExtraSmall", "Small", "Medium", "Large"];
    var envValues = ["xs", "sm", "md", "lg"];

    var $el = $('<div>');
    $el.appendTo($('body'));

    for (var i = envValues.length - 1; i >= 0; i--) {
        var envVal = envValues[i];

        $el.addClass('hidden-'+envVal);
        if ($el.is(':hidden')) {
            $el.remove();
            return envs[i]
        }
    };
}

Bootstrap 3 validation states with JQuery-validated form that uses Chosen plugin

1. Prevent the textarea control from being applied the success validation state since this form control is not being validated as it is optional.

   The empty textarea is "valid" because your validation says an empty field is valid, therefore it's green. You could conditionally use highlight and unhighlight so that it will not be applied to your textarea. However, then it will not work when your maxlength rule is evaluated. I know of no workaround that will cause unhighlight to get ignored when the field is technically "valid" and yet still empty. There is no "optional" condition/state provided in this plugin... once the form is evaluated, fields are either "valid" or "invalid", nothing in between.

   EDIT: You can conditionally apply highlight and unhighlight on the textarea using the custom :blank selector and applying a class to this "optional" element. Then you'll still get the red & green outlines, but only when this "optional" field is filled out and/or your rules are evaluated.

   highlight: function (element) {
       if (! ($(element).hasClass('optional') && $(element).is(':blank'))) {
           $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
       }
   },
   unhighlight: function (element) {
       if (! ($(element).hasClass('optional') && $(element).is(':blank'))) {
           $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
       }
   }
   

2. Apply the error validation state to the border of the dropdown list. Right now only the label gets the error validation state applied.

   You need to look at the rendered DOM and find the dynamically created Chosen element. Then you need to write jQuery to traverse over to this element and conditionally apply the appropriate classes via highlight and unhighlight.

   highlight: function (element) {
       if ($(element).hasClass('chosen-select')) {
           $(element).siblings('.chosen-container').removeClass('has-success').addClass('has-error');
       }
       $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
   },
   unhighlight: function (element) {
      if ($(element).hasClass('chosen-select')) {
          $(element).siblings('.chosen-container').removeClass('has-error').addClass('has-success');
      } 
      $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
   }
   

   This code above is applying the has-error and has-success classes to the rendered Chosen div element; you just need to adjust your CSS so that there is a red border. Otherwise, write your own CSS classes for this like I did in the demo below. Adjust accordingly.

3. Remove the error validation state and error message, and apply the success class when the user chooses an option from the dropdown list.

   You must write a change handler that calls the .valid() method on the select element every time it changes. This is because you are interacting with the rendered select list and not the actual select element. Otherwise, the jQuery Validate plugin is not properly triggered.

   $('.chosen-select').on('change', function () {
       $(this).valid();
   });
   

DEMO: https://jsfiddle.net/jxvqsodz/7/

Retrieving clicked state of bootstrap checkbox

You should use is(':checked'):

$(document).on('click', '#myButton', function() {  alert($('#myCheckbox').is(':checked'));});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container">  <div class="row">    <label class="checkbox">      <input type="checkbox" id="myCheckbox">      <span class="checkmark"></span>      A test checkbox    </label>  </div>  <div type="button" id="myButton">Press me</div></div>

How to create 3 state checkbox button with bootstrap 4

I figured out a way of having as many states as wanted to be toggled with one button while the button indicates the state. This is what I was looking for - most of the code is proudly found and put together from different parts of the internet!

If you have a suggestion how to make this even shorter AND easier to read, please comment or directly edit it :)

var $radios = $('input[type="radio"][name="high"]');
$('#result').html($radios.filter(':checked').val());

$('#toggler').click(function() {
  var colorClasses = ["btn-danger", "btn-success", "btn-secondary"];
  var $checked = $radios.filter(':checked');
  var $next = $radios.eq($radios.index($checked) + 1);
  if (!$next.length) {
    $next = $radios.first();
  }
  $next.prop("checked", true);
  var newValue = $radios.filter(':checked').val();
  $(this)
    .removeClass(colorClasses.join(" "))
    .addClass(colorClasses[newValue]);
  $('#result').html(newValue);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="btn-group-toggle" data-toggle="buttons">
  <input type="radio" name="high" value="2" checked hidden>
  <input type="radio" name="high" value="1" hidden>
  <input type="radio" name="high" value="0" hidden>
  <button type="button" id="toggler" class="btn btn-secondary">High</button>
</div>
Result:
<div id='result'></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Loading state button in Bootstrap 3

You need to detect the click from js side, your HTML remaining same. Note: this method is deprecated since v3.5.5 and removed in v4.

$("button").click(function() {
    var $btn = $(this);
    $btn.button('loading');
    // simulating a timeout
    setTimeout(function () {
        $btn.button('reset');
    }, 1000);
});

Also, don't forget to load jQuery and Bootstrap js (based on jQuery) file in your page.

JSFIDDLE

Official Documentation

Jquery if checkbox is checked Bootstrap switch

Use :

if ($('#uho').is(':checked')) {

instead of

if ($('#uho').attr('checked')) {

Bootstrap-switch state

I am not user of bootstrap-switch but after going to it's demo page I've noticed that there is an checkbox input. You can read the state by reading checkbox state:

// switch to OFF
$('.bootstrap-switch-container input').prop('checked')
// false

// switch to ON
$('.bootstrap-switch-container input').prop('checked')
// true

Bootstrap Switch - Change state after clicking on button

You can use the state method to prevent the switch from changing. Remember to use the third parameter to make sure the event is not executed again.

    $('#myswitch').bootstrapSwitch('state', !data, true);

Working example :

https://jsfiddle.net/hL0as0mv/169/

Full documentation :
http://bootstrapswitch.site/methods.html

---

Related Topics