jquery 在哪里设置preventDefault？

flmtquvp 于 2023-08-04 发布在 jQuery

关注(0)|答案(3)|浏览(123)

我创建了两个选择，prodSelect和calcSelect。我想做的是，如果prodSelect不为空，它应该阻止calcSelect能够更改。我是不是把preventDefault放在了错误的位置？我已经尝试了一些不同的解决方案，但我想我可能是最接近这一个。这里是一些HTML和我目前的jQuery。
超文本标记语言

<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 = '';
    }
});

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

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

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

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

jquery

来源：https://stackoverflow.com/questions/49054014/where-to-put-preventdefault

3条答案

按热度按时间

yr9zkbsy1#

.on("change", (e) => {
    e.preventDefault()
    ...

字符串
将 * 阻止 * 默认（浏览器）行为，但 * 仅在 * 用户更改了渲染DOM（浏览器UI）中的某些内容之后，因此它不会阻止 * 更改 * 本身，而只是阻止由 * 更改 * 触发的后续自动操作。
你要做的是倾听改变的尝试（例如：click）并防止这种情况。
更好的方法是将<select>设置为readonly，当另一个select的.val()为空（""）时：

$('#prodSelect').on('change', 
  event => $('#calcSelect').attr(
    'readonly',
    $(this).val() === ""
      ? false
      : true
  )
);

型
PS -readonly比disabled更可取，因为这将阻止表单提交其值。

赞(0）回复(0）举报 2023-08-04

pxy2qtax2#

preventDefault()只用于防止某些东西运行其默认行为。例如，提交时提交的表单。它与行为或事件有关。
要禁用某些功能，您需要禁用它。

$('#prodSelect').attr('disabled', 'disabled')

字符串
这将禁用#prodSelect。

赞(0）回复(0）举报 2023-08-04

mnowg1ta3#

防止calcSelect被更改的方法是

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

字符串
如果需要，还可以使用CSS设置处于禁用状态的选择框的样式

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 在哪里设置preventDefault？

3条答案

相关问题

热门标签

最新问答