Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1042
  • Last Modified:

I would like to add toggle readonly on two select fields after clicking on the Bootstrap Swtich plugin.

I'm trying to figure out how to toggle off/on "disabled" attribute on two select fields and submit button from the bootstrap switch pulgin. I have several rows that are dynamically being created with the code below.

http://www.bootstrap-switch.org/documentation-3.html

START LOOP...

<input type="checkbox" name="my-checkbox" >
<div>
   <select.... 
</div>
<div>
   <select....
</div>
<button type="submit"...

END LOOP...


<script>
$(document).ready(function(){

    $('input[name="my-checkbox"]').bootstrapSwitch('state', false, true);

    $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
          Not sure how to add this in...
    });
</script>

Open in new window

0
brihol44
Asked:
brihol44
  • 2
  • 2
1 Solution
 
Alexandre SimõesManager / Technology SpecialistCommented:
This should work considering the selects have their id set to select1 and select2
    $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
          $('#select1').prop('disabled', state);
          $('#select2').prop('disabled', state);
    });

Open in new window

0
 
brihol44Author Commented:
Thx! Haven't tried this yet but I will have multiple sets of selects and toggle buttons... I thought I had to do something like...

$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
          $(this).("div").each('select').prop('disabled', state);
    });

I believe this approach would only get the 1 div though, correct? Guess that's my next question.
0
 
brihol44Author Commented:
oops... missed "next"

$(this).next("div").each('select').prop('disabled', state);
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
Hi mate, I came up with this generic solution:
http://jsfiddle.net/AlexCode/77en5j7j/
With this it doesn't really matter how many "groups" you have. As long as they have a checkbox all inner selects will be enabled/disabled according to the status of the checkbox.

Also although I'm not using the plugin event this should work as underneath there's a checkbox anyway.
If for some reason it doesn't work you might encapsulate the main logic in a function and call it from the plugin event.
$('.group input[type="checkbox"]').on(
    'change', 
    function(){
        var $this = $(this),
            checked = $this.prop('checked');
        
        $this.closest('.group').find('select').prop('disabled', !checked);
    }
);

Open in new window

<div class="group">
    <input id="chk1" type="checkbox" checked />
    <label for="chk1">Active</label>
    <select><option>item 1</option></select>
    <select><option>item 1</option></select>
    <select><option>item 1</option></select>
</div>

<div class="group">
    <input id="chk2" type="checkbox" checked />
    <label for="chk2">Active</label>
    <select><option>item 1</option></select>
    <select><option>item 1</option></select>
    <select><option>item 1</option></select>
</div>

<div class="group">
    <input id="chk3" type="checkbox" checked />
    <label for="chk3">Active</label>
    <select><option>item 1</option></select>
    <select><option>item 1</option></select>
    <select><option>item 1</option></select>
</div>

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now