Question

我在页面上有20个选择，我需要检测用户何时将其中任何一个设置为值＆gt; 0（每个的默认值为0）。它们都是类“numSel”所以我试图让这段代码工作：

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

但这仅适用于页面上的第一个选择。如果我选择其中一个选择，则提交按钮将保持禁用状态。

有什么想法吗？

Answer 1

如果代码位于.change()或.each()块内，您可以使用this来引用已更改的<select>。

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

如果您希望在将所有值设置回0后将其恢复为禁用，请在.each()语句中添加else块。

$(".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();

Answer 2

使用unique ids和same classes分配您的选择。

假设您将其课程指定为numSel。这就是如果他们改变就会检测到所有这些内容的方法。

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

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

Answer 3

这样，您指的是当前的选择，而不需要指定特定的选择器：

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

Answer 4

这个怎么样？

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

说明：对于每个类numSel，检查值是否大于0。

Answer 5

我可能会误解这个问题，但我认为你要找的是允许提交，如果任何下拉列表非零，并且如果所有下拉列表都设置为0则总是禁用它。如果这样做的话。那么这就是你需要的：

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

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

Answer 6

您想要检测用户何时设置任何20 t0 a值＆gt; 0 但不是当用户将any设置为0 时。对？您可以使用change事件和某些逻辑，也可以使用change事件和自己的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>

警告

当用户将其中任何一个设置为值＆gt;时检测 0 不是控制按钮的安全方式。在任何一个更改事件中，实际计算有多少select个元素具有非零值并根据该数字确定要执行的操作更安全。您没有检测用户何时/是否将检测到的选择元素上的值更改为零。现在，这是代码：

$('.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>

检测用户更改值的任何选择

6 个答案: