4

Need to enable a button on a page only if all questions have been answered, I have 5 dropdowns for this and need to make sure user answer all of them before letting him go to next step.

Tried to iterate through each select on each change, but can't make it work, bad JS knowledge.

 arr = $('.select1, .select2, .select3, .select4, .select5')
  $('.select1, .select2, .select3, .select4, .select5').on('change', function(event) {
    $.each(arr, function(index, val) {
       /* tried here something */
    });
  });

I was wondering may be there is a better way to do this, something like in one line: select.selected.size = 5.

Thank you for any kind of help - ideas, solutions, links, etc..

rmagnum2002
  • 11,341
  • 8
  • 49
  • 86

7 Answers7

3

I had a few moments, so I thought I'd offer a potential solution; given HTML like the following:

<select name="test1">
    <option value="-1">Please select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<!-- HTML repeated as much as you like -->

The following plug-in would work:

(function($){
    $.fn.allSelected = function(){
        return this.filter(function(){
            return parseInt(this.value, 10) > 0;
        }).length >= this.length;
    };
})(jQuery)

And can be called like so:

$('select').on('change', function(){
    console.log($('select').allSelected());
});

JS Fiddle demo.

Updated the above so that a value can be passed into the plug-in to be considered an invalid choice (in the demo I've, arbitrarily, used 3), but which defaults to -1 if the user supplies no argument. In this case if any of the elements have a value equal to the noChoiceValue (for want of a better name) the plug-in returns false:

(function($){
    $.fn.allSelected = function(opts){
        var s = $.extend({
            'noChoiceValue' : -1
        }, opts);
        return this.filter(function(){
            return this.value !== s.noChoiceValue.toString();
        }).length >= this.length;
    };
})(jQuery);

$('select').on('change', function(){
    console.log($('select').allSelected({
        'noChoiceValue' : 3
    }));
});

JS Fiddle demo.

References:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • For me being so noob in JS I was expecting for an answer like this :) Tank you. And thanks to other devs here, it's just this one I could manage it to work properly. – rmagnum2002 Apr 14 '14 at 09:42
2

Try

var arr = $('.select1, .select2, .select3, .select4, .select5');
arr.change(function () {
    if (arr.filter('option[value!=""]:selected').length == arr.length) $('#bntid').prop('enabled', true);
});

.filter()

:selected

Attribute Not Equal Selector [name!="value"]

arr.filter('option[value!=""]:selected').length filter options selected in dropdown whose value is not "" and get it's lenght

Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
1

You can try something like this

selects = $('[class^=select]');
selects.on('change', function(event) {
   if(selects.length == $('[class^=select]:selected]').length)
   {
   }
});
Adil
  • 146,340
  • 25
  • 209
  • 204
1

Do the check in your "check" function :

function checkValid($selects) {
    var check = true;
    $selects.each(function(){
         if ($(this).val() == "") {
             check = false;
         }
    });

    return check;
}

// usage example :
var ok = checkValid( $('.select1, .select2, .select3, .select4, .select5') );
$('#myButton').prop('enabled', ok);
LeGEC
  • 46,477
  • 5
  • 57
  • 104
1

Dropdowns will always have a selected option..

http://jsfiddle.net/hNvGf/1/

$('select>option:selected').length == $('select').length

You should probally be checking if the selected option is not the default one..

for example, in your submit.. get the value of the selected item..

$.each($('.select1, .select2, .select3, .select4, .select5'), function(ind,val){
  if($(this).find('option:selected').val() !== 1)){
     return false;
  }
});
JF it
  • 2,403
  • 3
  • 20
  • 30
  • Then you'll need a case for that, for each select, check the selected value.. need more information :/ – JF it Apr 14 '14 at 09:36
1

One could define a class for dropdown lists on the page, e.g.:

<select id='select1' class='dropdownClass'>
    <option value='value1'>value1</option>;
    <!-- etc -->

<select id='select2' class='dropdownClass'>
    <option value='value1'>value1</option>;
    <!-- etc -->

Set dropdowns to 'not selected' by default, e.g.:

<body onload='setDropdown()'>
<!-- -->
</body>

<script>
function setDropdown(){
    document.getElementById('select1').selectedIndex = -1
    document.getElementById('select2').selectedIndex = -1
    //etc
}
</script>

Then simply compare the number selected dropdowns to the total number of dropdowns in the class on change, and if equal, enable the button:

$('.dropdownClass').change(function(){
    if ($('.dropdownClass>option:selected').length == ($('.dropdownClass').length)){
          document.getElementById('buttonId').disabled = false;
    }
});

Be sure to have the button initially disabled:

<button id='buttonId' disabled='true'>Submit</button>
Ogster
  • 11
  • 2
0
 arr = $('.select1, .select2, .select3, .select4, .select5')
  $('.select1, .select2, .select3, .select4, .select5').on('change', function(event) {
    var n = '0';
    $.each(arr, function(index, val) {
       if( $(this).find('option:selected').index() == '0' ){
          //first option [default] is selected
            var n = (n+1);
           }
        });
    if ( n == (arr.length+1) ){
       //all select has values
       }
  });
Catalin Sterian
  • 96
  • 1
  • 10