Как предотвратить событие, если есть сообщение об ошибке?

Question

У меня есть выпадающий список автомобилей. Если какой-либо из них становится неактивным, отображается сообщение об ошибке. Когда отображается сообщение об ошибке, если я нажимаю на кнопку Route Car событие должно быть предотвращено. т.е. модальное всплывающее окно не должно быть показано.

Как этого добиться?

Бездействующими автомобилями являются сааб, феррари, ягуар. При выборе этих неактивных сообщений будет отображаться.

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

Удалить 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);
})

Смотрите Демо.

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

демонстрация