Activate / deactivate checkbox bootstrap-toogle

Question

Activate / deactivate checkbox bootstrap-toogle

Navigation

#1 by (1 votes)

1

I have several detail lines on the screen, each one with two checkboxes (one of them bootstrap-toogle) and I would like it when the first checkbox is activated, the second is enabled and it is set to on, and when the first checkbox is deactivated checkbox, put in disable and in off (always the same line).

Code of the first checkbox:

echo "<td><input type='checkbox' class='checkbox_class' name='baja[]' value='' id='check1' onclick='validar_sino(this);''></td>";

Code of the second checkbox:

echo "<td><input type='checkbox' disabled name='sino' id='sino' data-toggle='toggle' data-size='mini' data-on='Si' data-off='No' data-onstyle='success' data-offstyle='danger'></td>";

Javascript code

<script type="text/javascript">  
function validar_sino(elemento) { 
    var checkbox1 = document.getElementById("check1"); 
    if (checkbox1.checked == true) { 
        $('#sino').bootstrapToggle('on');           
        $('#sino').bootstrapToggle('enable'); 
    } else { 
        $('#sino').bootstrapToggle('off');         
        $('#sino').bootstrapToggle('disable'); 
    } 
} 
</script>

Can someone help me?

Greetings.

php bootstrap

asked by osbragon 28.09.2016 в 12:59

source

1 answer

Why do I mark Error in the matrices when assigning values in C #? Expected unqualified-id before "for" Arduino

score 1 · Accepted Answer

From what I see in your code, apparently you use jQuery, so I propose a solution with this framework:

Is to detect when you change an element with the class checkbox class and that is contained in a <td> , then look for the following <td> (taking into account that we do not know the totality of your code and I do not know if have more td between the two that matter to us), later we find their "checkbox" elements contained in said td and activate / deactivate according to the new status of our first checkbox:

$('td .checkbox_class').change(function() {
  var nextCheckbox = $(this).parent().nextAll('td').children('[type=checkbox]');
  if ($(this).is(':checked')) {
    nextCheckbox.prop('disabled', false);      
  } else {
    nextCheckbox.prop('disabled', true).prop('checked', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type='checkbox' class='checkbox_class' name='baja[]' value='' id='check1'/></td>
    <td><input type='checkbox' disabled name='sino' id='sino' data-toggle='toggle' data-size='mini' data-on='Si' data-off='No' data-onstyle='success' data-offstyle='danger'></td>
  </tr>
  <tr>
    <td><input type='checkbox' class='checkbox_class' name='baja2[]' value='' id='check2'/></td>
    <td><input type='checkbox' disabled name='sino2' id='sino2' data-toggle='toggle' data-size='mini' data-on='Si' data-off='No' data-onstyle='success' data-offstyle='danger'></td>
  </tr>
<table>