Question

我正在创建两个选择，prodSelect和calcSelect。我想要做的是如果prodSelect不为空，它应该阻止calcSelect能够改变。我将preventDefault置于错误的位置吗？我尝试了一些不同的解决方案，但我想我可能是最接近这个的解决方案。这是一些HTML和我目前的jQuery。

HTML

<div class="col third">
  <label>Choose Calculator</label>
    <select name="calc" id="calcSelect">
      <option value=""></option>
      <option value="concrete">Concrete</option>
      <option value="round">Post Setting</option>
      <option value="filling">Filling</option>
 </select>
</div>
<div class="col third split">
  <label>Choose Product</label>
    <select name="prod" id="prodSelect">
      <option value=""></option>
      <option value="high-strength">High Strength</option>
      <option value="five-thousand-plus">5000 Mix</option>
      <option value="crack-resistant">Crack Resistant</option>
    </select>
  </label>
</div>

的jQuery

  $("#calcSelect").on("change", function(e){
    e.preventDefault();
    //alert( e.isDefaultPrevented() ); == true

    var rex = $('#prodSelect').val();
    var calc = $("#calcSelect option:selected").val();

    if(rex != '' && $("#calcSelect option").is(":selected")){
      calc = '';
    }
});

EDITED

在尝试了一些解决方案后，我想出了这个：

function checkProd(){
  var rex = $('#prodSelect').val();
  var calc = $("#calcSelect option:selected").val();

    if(rex != ''){
      $("#calcSelect").prop('disabled', true);
    }
    else{
      $("#calcSelect").prop('disabled', false);
    }
}

但是，如果prodSelect值为空，现在它将无法正常启用...

Answer 1

button仅用于防止某些内容运行其默认行为。例如，提交时提交的表单。它与行为或事件有关。

要停用某些内容，您需要将其停用。

preventDefault()

这会禁用$('#prodSelect').attr('disabled', 'disabled')。

Answer 2

阻止更改calcSelect的方法是

document.getElementById('calcSelect').disabled = true;

如果需要，也可以使用CSS将选择框设置为禁用状态

在哪里放防止默认？

2 个答案: