CODEWITHSUNDEEP
jquery
lastNerve
lastNerve

Reputation: 121

Detect any select that a user changes the value of

I have 20 selects on a page and I need to detect when a user sets any one of them to a value > 0 (the default value for each one is 0). They are all of class "numSel" so I'm trying to make this code work:

if($('.numSel').val() > 0){ 
    $("#submit").prop('disabled', false);           
}

But this only works on the first select on the page. If I choose one of the other selects the submit button remains disabled.

Any ideas?

Upvotes: 0

Views: 63

Answers (6)

castletheperson
castletheperson

Reputation: 33466

If the code is within a .change() or .each() block, you can use this to reference the <select> that changed.

$('.numSel').change(function() {
    if ($(this).val() > 0)
        $("#submit").prop('disabled', false);
}).change(); // run the block here to detect the initial values

If you want it to revert to be disabled when all of the values are set back to 0, add a .each() block to the else statement.

$(".numSel").change(function() {
    if ($(this).val() > 0) {
        $("#submit").prop("disabled", false);
    } else {
        $("#submit").prop("disabled", true);
        $(".numSel").each(function() {
            if ($(this).val() > 0) {
                $("#submit").prop("disabled", false);
                return false; // exits the each loop
            }
        });
    }
}).change();

Upvotes: 1

PeterKA
PeterKA

Reputation: 24638

You want to detect when the user sets any of the 20 t0 a value > 0 but not when the user sets any to 0. Right? You can use the change event and some logic or you can use the change event and a own custom event:

$('.numSel').on('change', function() {
    //if value > 0 trigger 'custom_event'
    !+this.value || $(this).trigger('custom_event');
});

$('.numSel').on('custom_event', function() {
    //Do stuff (when custom_event is triggered)
});


$('.numSel').on('change', function() {
    //if value > 0 trigger 'custom_event'
    !+this.value || $(this).trigger('custom_event');
});

$('.numSel').on('custom_event', function() {
    //Do stuff (when custom_event is triggered)
    console.log( this.value, this );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="numSel" name="one">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select class="numSel" name="two">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select class="numSel" name="three">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

Warning

Detecting when a user sets any one of them to a value > 0 is not a safe way of controlling the button. On any one change event, it is safer to actually count how many select elements have a non-zero value and determine what to do based on that number. You're not detecting when/if the user changes values on the detected select elements to zero. And now, here's the code:

$('.numSel').on('change', function() {
    //count number of non-zero values
    var n = $('.numSel').filter(function() {
        return +this.value > 0;
    }).length;
    //set button based on the number
    $('.submit').prop( 'disabled', n == 0 );
})
//for when the page loads
.first().change();


$('.numSel').on('change', function() {
    //count number of non-zero values
    var n = $('.numSel').filter(function() {
        return +this.value > 0;
    }).length;
    //set button based on the number
    $('.submit').prop( 'disabled', n == 0 );
})
//for when the page loads
.first().change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="numSel" name="one">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select class="numSel" name="two">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select class="numSel" name="three">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<button class="submit">SUBMIT</button>

Upvotes: 0

phynam
phynam

Reputation: 465

This way, you are referring to the current select, and don't need to specify a specific selector:

$('.numSel').on('change', function() {
    if(parseInt($(this).val()) > 0) {
        $('#submit').prop('disabled', false); 
    }
});

Upvotes: 0

Tim Hysniu
Tim Hysniu

Reputation: 1540

I might be misunderstanding the question, but I think what you are looking for is to allow submitting if any of the dropdowns is non-zero and always disable it if all of them are set to 0. If that's the case then this is what you need:

$('.numSel').on('change', function() {
    var isDisabled = true;
    $(this).each(function() {
        if(parseInt($(this).val()) > 0) {
            isDisabled = false;
        }
    });

    $(this).prop('disabled', isDisabled);
});

Upvotes: 0

Vic Lee
Vic Lee

Reputation: 32

How about this ? 

 $('.numSel').each(function(){ 
 if(parseInt($(this).val())>0)
 //Your code           
 });

Explanation: For each of the class numSel, check through the value if it is more than 0.

Upvotes: 0

choz
choz

Reputation: 17858

Assign your selects with unique ids and same classes.

Let's say you assign their classes as numSel. And this is how you will detect all of them if they change.

function callbackFn() {
  var $sel = $(this);
  // $sel.attr('id');
  var val = parseInt($sel.val());
  if (val > 0) {
     $("#submit").prop('disabled', false);
  }
}

$('.numSel').on('change', callbackFn);

Upvotes: 0

Related Questions