CODEWITHSUNDEEP
javascriptjquery
user3690480
user3690480

Reputation: 25

Hide/Unhide button depending on selection

I am developing this script where one can select and press next to present another set of steps. I have a submit button to move to the next step and I need to disable it by default and enable only if the selection includes 2 more selections.

A JSFiddle can be found here: http://jsfiddle.net/fhu95/

Here Is my code:

JS:

    var selections = {
    "Television": false,
    "Internet": false,
    "Telephony": false,
    "Mobile": false,
    "opt5": false,
    "opt6": false,
    "opt7": false
};

$(document).ready(function() {
    $('.option').click(function(event) {
        var id = event.target.id;
        if (selections[id]) {
            $('#' + id).removeClass('checked-option');
            selections[id] = false;
        } else {
            $('#' + id).addClass('checked-option');
            selections[id] = true;
        }
    });




    $('#btn1').click(function() {
        $('#grp1').hide();
        $('#grp2').show();
    });

HTML for the button:

<div class="btn"><button id="btn1">Next</button></div>

Upvotes: 0

Views: 110

Answers (4)

T J
T J

Reputation: 43156

If i understood correctly, You don't have to keep track of the selected items in an object and add/remove classes. You can do the entire thing using a single prev/next button as simple as this:

HTML

<div id="grp1" class="selected">
  <div class="option" id="opt1">opt1</div>
  <div class="option" id="opt2">opt2</div>
  <div class="option" id="opt3">opt3</div>
</div>
<div id="grp2">
  <div class="option" id="opt4">opt4</div>
  <div class="option" id="opt5">opt5</div>
  <div class="option" id="opt6">opt6</div>
  <div class="btn">
    <button id="done" disabled>Done</button>
  </div>
</div>
<div id="grp3">
  <div id="selectedItems"></div>
</div>
<div class="btn">
  <button id="toggleBtn">Next</button>
</div>

JS

$(document).ready(function () {

  $('.option').click(function (event) {
    $(this).toggleClass('checked-option');
    if ($('.checked-option').length >= 2) $('#done').prop('disabled', false);
    else $('#done').prop('disabled', true);
  });

  $('#toggleBtn').click(function () {
    if ($('#grp1').hasClass('selected')) {
        $('.selected').hide().removeClass('selected');
        $('#grp2').show().addClass('selected');
        $(this).text('prev');
    } else if ($('#grp2').hasClass('selected')) {
        $('.selected').hide().removeClass('selected');
        $('#grp1').show().addClass('selected');
        $(this).text('next');
    } else {
        $('.selected').hide().removeClass('selected');
        $('#grp2').show().addClass('selected');
        $(this).text('prev');
    }
  })

  $('#done').click(function () {
    var $selections = $('.checked-option');
    var content = 'Selected:<ul>';
    $selections.each(function () {
        content += '<li>' + $(this).attr('id'); + '</li>';
    });
    content += '</ul>';
    $('#selectedItems').html(content);
    $('.selected').hide().removeClass('selected');
    $('#grp3').show().addClass('selected');
  });

});

Demo

Upvotes: 0

j809
j809

Reputation: 1499

Do this:

HTML

<div id="grp1">
    <div class="option" id="opt1">opt1</div>
    <div class="option" id="opt2">opt2</div>
    <div class="option" id="opt3">opt3</div>
    <div class="btn"><button id="btn1">Next</button></div>
</div>
<div id="grp2">
    <div class="option" id="opt4">opt4</div>
    <div class="option" id="opt5">opt5</div>
    <div class="option" id="opt6">opt6</div>
    <div class="btn"><button id="btn2">Back</button></div>
    <div class="btn"><button id="btn3" disabled="disabled">Done</button></div>
</div>
<div id="grp3">
    <div id="done"></div>
    <div class="btn"><button id="btn4">Back</button></div>
</div>

JS

var selections = {
    "opt1": false,
    "opt2": false,
    "opt3": false,
    "opt4": false,
    "opt5": false,
    "opt6": false
};
var optioncount=0;
$(document).ready(function() {
    $('.option').click(function(event) {
        var id = event.target.id;
        if (selections[id]) {
            $('#' + id).removeClass('checked-option');
            selections[id] = false;
            --optioncount;
        } else {
            $('#' + id).addClass('checked-option');
            selections[id] = true;
            ++optioncount;
        }
        if(optioncount>1) {
            $("#btn3").prop("disabled",false);
        }
        else {
            $("#btn3").prop("disabled",true);
        }
    });
    $('#btn1').click(function() {
        $('#grp1').hide();
        $('#grp2').show();
    });
    $('#btn2').click(function() {
        $('#grp2').hide();
        $('#grp1').show();
    });
    $('#btn3').click(function() {
        var content = 'Selected:<ul>';
        for (var i in selections) {
            if (selections[i]) {
                content += '<li>' + i + '</li>';
            }
        }
        content += '</ul>';
        $('#grp2').hide();
        $('#done').html(content);
        $('#grp3').show();
    });
    $('#btn4').click(function() {
        $('#grp3').hide();
        $('#grp2').show();
    });
});

DEMO

Upvotes: 0

Ganesh Jadhav
Ganesh Jadhav

Reputation: 2848

Keep a count of current checked options and use it to enable or disable the button, after every click on an option.
Fiddle here: http://jsfiddle.net/Jtz8A/1/

var count = 0;
$(document).ready(function() {
    $('#btn1').prop('disabled', true); // Disable button on load
    $('.option').click(function(event) {
        var id = event.target.id;
        if (selections[id]) {
            $('#' + id).removeClass('checked-option');
            selections[id] = false;
            count--; // Keep count
        } else {
            $('#' + id).addClass('checked-option');
            selections[id] = true;
            count++; // Keep count
        }
        if(count > 1) // Use count to enable or disable button
           $('#btn1').prop('disabled', false);
        else
           $('#btn1').prop('disabled', true);
    });

Upvotes: 1

Adrian Toma
Adrian Toma

Reputation: 547

You should verify your selection array after each modification with a function like this:

function processSelections()
{
  var enabled = 0;
  for( var id in selections )
  {
    if( selections[ id ] == true )
    {
       enabled ++;
    }
  }
  if( enabled >= 2 )
  {
    $("#button_id").prop('disabled', false);
  }
  else
  {
     $("#button_id").prop('disabled', true);
  }
}

and call this function after each modification on selection object

if (selections[id]) {
            $('#' + id).removeClass('checked-option');
            selections[id] = false;
            processSelections();
        } else {
            $('#' + id).addClass('checked-option');
            selections[id] = true;
            processSelections();
        }

And call it once at start, to set disabled first.

Upvotes: 0

Related Questions