如果出现错误消息，如何防止事件

How to prevent an event if there is an error message?

本文关键字：何防止 事件 消息 错误 如果      更新时间：2023-09-26

我有一个汽车的下拉列表。如果它们处于非活动状态，则会显示一条错误消息。当显示错误消息时，如果我单击"路线汽车"按钮事件应被阻止。即不应显示任何模式弹出窗口。

如何实现这一点？

不活跃的汽车是萨博、法拉利、捷豹。当您选择这些非活动消息时，将显示。

.HTML 

<select id="drp">
    <option value="0">--SELECT--</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="honda">Honda</option>
    <option value="ferrari">Ferrari</option>
    <option value="BMW">BMW</option>
    <option value="jaguar">Jaguar</option>
</select>
<div class="divInactive">
    <span id="spninactive_Saab" style="display:none;">Saab is inactive</span>
    <span id="spninactive_Ferrari" style="display:none;">Ferrari is inactive</span>
    <span id="spninactive_Jaguar" style="display:none;">Jaguar is inactive</span>
</div>

<input type="button" class="btn btn-default" value="Route Car" data-toggle="modal" href="~/Car/GetMethod?CarId=@Model.GeneralInfo.CarID" data-target="#divCarPopUp" />
<div id="divCarPopUp" role="dialog" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function() {
    $("#drp").on("change", function() {
        var ddlTxt = $("#drp option:selected").text();
        $(".divInactive span").hide();
        $("#spninactive_" + ddlTxt).show();
    })
});

现场演示

从按钮中删除data-toggle="modal",data-target属性。因此，默认情况下它不会打开模态。使用按钮click function打开模式，并在功能内检查选择的活动或非活动类型的汽车

<script type="text/javascript">
   var inactiveCar = false;
    $(document).ready(function () {
    $("#drp").on("change", function () {
        inactiveCar = false;
        var ddlTxt = $("#drp option:selected").text();
        $(".divInactive span").hide();
        $("#spninactive_" + ddlTxt).show();
        if ($("#spninactive_" + ddlTxt).length > 0) {
            inactiveCar = true; //inactive car found
        }
    })
});
$("#modalButton").on("click", function () {
    if (inactiveCar == false) { //inactive car is not selected so open popup
        $("#divCarPopUp").modal('show');
    }
});
</script>

琴师

如果所选项目处于非活动状态，则可以使用以下方法禁用该按钮。 

$("#drp").on("change", function() {
  var ddlTxt = $("#drp option:selected").text();
  $(".divInactive span").hide();
  if ($("#spninactive_" + ddlTxt).length) {
    $("#spninactive_" + ddlTxt).show();
    $('input[value="Route Car"]').prop('disabled', true);
  } else
    $('input[value="Route Car"]').prop('disabled', false);
})

请参阅演示。

尝试在选择非活动选项时禁用该按钮

$(document).ready(function() {
$("#drp").on("change", function() {
    var ddlTxt = $("#drp option:selected").text();
    $(".divInactive span").hide();
    $("#spninactive_" + ddlTxt).show();
    if($("#spninactive_" + ddlTxt).length>0)
      $("input[value='Route Car']").attr("data-target","")
    else
      $("input[value='Route Car']").attr("data-target","#divCarPopUp")
})});

演示

相关文章：