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

Question

我有一个汽车下拉列表。如果其中任何一个变为非活动状态，则会显示一条错误消息。当显示错误消息时，如果我点击 Route Car 按钮事件应该被阻止。即不应显示模态弹出窗口。

如何实现？

不活跃的车有萨博、法拉利、捷豹。当您 select 时，将显示这些不活动的消息。

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();
    })
});

LIVE DEMO

Answer 1

从 button.So 中删除 data-toggle="modal",data-target attr 它不会通过 default.Open 使用按钮的 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>

FIDDLER

Answer 2

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

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

见Demo。

Answer 3

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

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

Demo

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

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

html

javascript

validation

jquery

bootstrap-modal