Question

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

如何实现这一目标？

非活动汽车是saab，ferrari，jaguar。当您选择这些非活动消息时将会显示。

HTML

id

的JavaScript

<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>

LIVE DEMO

Answer 1

从按钮中移除data-toggle="modal",data-target attr。因此默认情况下不会打开模态。使用按钮的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

如果有错误消息，如何防止事件？

3 个答案: