Disable button unless bot selectors have value

Question

OK, I have two HTML select elements and a button. I need to disable the button unless both of the selectors have any but default (na) values.

I've got this so far, but it doesn't really work. What am I missing?

JS

function toggleBtn() {
    if($(".mySelect").val() == "na") {
        $(this).parents("td").find("input:button").attr("disabled", "disabled");    
    } else {
        $(this).parents("td").find("input:button").attr("disabled", "");    
    }
});

toggleBtn();

$(".mySelect").change(toggleBtn());

HTML

<table>
<tr>
  <td>
    <select class="mySelect">
      <option value="na"></option>
      <option value="1">value 1</option>
      <option value="2">value 2</option>
    </select> 

    <select class="mySelect">
      <option value="na"></option>
      <option value="3">value 3</option>
      <option value="4">value 4</option>
    </select> 
  </td>
</tr>
<tr>
  <td>
    <input type="button" value="click me">
  </td>
</tr>
</table>

score 2 · Answer 1 · answered Mar 30 '12 at 19:58

I'm not sure if you understand that $('.mySelect') is a collection of multiple <select>s, so calling .val() on it returns only the value of the first in the collection. Something like this should work for you:

var selects = $('.myChange');
var button = $('table td input:button');

selects.change(function() {

    var defaultVal = true;

    selects.each(function(index, el) {
        if ($(el).val() == 'na') defaultVal = true;
    });

    button.attr('disabled', defaultVal ? 'disabled' : '');

});

Any time one of the <select>s is changed, we are looping through all of them to see if any has an 'na' value and, if so, we disable the button.

Thierry Blais · Accepted Answer · 2012-03-30T20:24:54.510

1

Chris beat me to it darnit my version is this one

Loop through all your selects, if you find one that's not 'na', disable your select button and stop the loop. You need to stop the loop or the last element basically dictates how your button behaves.

function toggleBtn() {
     var inputButton =  $('input[type="button"]').first();   
     inputButton.attr('disabled', null);
     $(".mySelect").each(function(index, element) {
        if ($(this).val() != 'na') {
            inputButton.attr('disabled', 'disabled');
            return false
            }
    });
 }
$(document).ready(function(e) {
    toggleBtn();
    $(".mySelect").change(toggleBtn);
    });

Plug that in to your script header and see what happens. This seems to work cross browser and we're using attr...

edited Mar 30 '12 at 20:24

answered Mar 30 '12 at 20:00

Thierry Blais

2,848
22
41

OK, this looks great. I use older version of jQuery (1.4.4) so I guess I'll use attr instead of prop. What is my there's a value already in the selectors on page load? Would this still work the same or do i need to add ELSE? – santa Mar 30 '12 at 20:08
Yes it will although doesn't look like it's working in IE, lemme see if I can fix that – Thierry Blais Mar 30 '12 at 20:11

score 0 · Answer 3 · answered Mar 30 '12 at 19:48

0

$(obj).attr('disabled', true);

answered Mar 30 '12 at 19:48

Etienne Dupuis

13,548
6
47
58

1

No. If you're going to use a boolean value, use `.prop`. [See why](http://stackoverflow.com/questions/5874652/prop-vs-attr) – Alex Turpin Mar 30 '12 at 19:50
but take notice that .prop is only available from jquery 1.6+ – Bogdan Emil Mariesan Mar 30 '12 at 19:50
I use jQuery 1.4.4 and in this project cannot upgrade. – santa Mar 30 '12 at 19:52

score 0 · Answer 4 · answered Mar 30 '12 at 19:55

0

You might use the id of button. just assign some id to the button and enable and disable based on id.

var buttons = $('#button1,#button2,#button3');
buttons.click(function(){
  buttons.(this).attr('disabled',true);
});

answered Mar 30 '12 at 19:55

Praveen-K

3,401
1
23
31

I was thinking of it but I have different tabs with similar cases, so I want a one solution for all. – santa Mar 30 '12 at 19:56
Ok so use the class instead of id. – Praveen-K Mar 30 '12 at 19:58

score 0 · Answer 5 · answered Mar 30 '12 at 20:07

How about this jsFiddle example?

jQuery:

function toggleBtn() {
    if ($(".mySelect:eq(0)").val() == "na" || $(".mySelect:eq(1)").val() == "na") {
        $('input[type="button"]').attr("disabled", true);
    } else {
        $('input[type="button"]').attr("disabled", false);
    }
};
$(".mySelect").change(function() {
    toggleBtn();
});
toggleBtn();

score 0 · Answer 6 · answered Mar 30 '12 at 20:17

This works for me:

HTML:

<table>
<tr>
  <td>
    <select class="mySelect">
      <option value="na"></option>
      <option value="1">value 1</option>
      <option value="2">value 2</option>
    </select>

    <select class="mySelect">
      <option value="na"></option>
      <option value="3">value 3</option>
      <option value="4">value 4</option>
    </select>
  </td>
</tr>
<tr>
  <td>
    <input type="button" value="click me" disabled="disabled">
  </td>
</tr>
</table>

SCRIPT:

$(".mySelect").change(function () {
    var buttonstate = 0;
    $('.mySelect').each(function () {
        if ($(this).val() != 'na') {
            buttonstate++;
        }
    });
    if (buttonstate == 2) {
        $(this).parent().parent().parent().find('input:button').attr("disabled", "");
    } else {
        $(this).parent().parent().parent().find('input:button').attr("disabled", "disabled");
    }
});

You can test this here: http://jsfiddle.net/tF8xc/13/

Disable button unless bot selectors have value

6 Answers6