如何防止发生错误消息时的事件？

-1

我有一个汽车下拉列表。如果任何它们不活动，则会显示一条错误消息。当显示错误信息时，如果我点击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/[email protected]" 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

来源

2016-03-02 Raviteja

，如果有一个错误弹出不应该出现？ – guradio

他们如何去活动？看起来好像禁用或删除选项也应该完成。然后，它是看是否选择有值与否 – charlietfl

@charlietfl我实现了非激活错误message.Don't需要担心that.Provided您的例子list.Just我并不需要显示弹出一个简单的事情如果显示任何不活动的错误消息。 – Raviteja

从button.So删除data-toggle="modal",data-target ATTR它不会打开由default.O模态笔使用按钮的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

来源

2016-03-02 06:03:08 shu

不工作[这里]（https://jsfiddle.net/iamraviteja/Lrqnd8L6/） – Raviteja

检查拨弄我已经给 – Raviteja

@Hazard https://jsfiddle.net/Lrqnd8L6/3/ – shu

如果所选择的项目使用以下是不活动的，则可以禁用的按钮。

$("#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。

来源

2016-03-02 06:05:08 RRK

我不想禁用按钮，弹出窗口不应该出现在点击按钮上。 – Raviteja

@Hazard然后应该发生什么...用户点击按钮，什么都没有发生？这是一个并不十分友好的用户界面 – charlietfl

这@Hazard你应该去讨论的要求，要求:) – Raviteja

尝试禁用按钮时无效选项是选择素

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

来源

2016-03-02 06:14:28 Vijaykrish93

我不想禁用按钮。 – Raviteja

如果妳不想要禁用它，然后更改数据，目标支撑这样 https://jsfiddle.net/mjv0wscL/ – Vijaykrish93

如何防止发生错误消息时的事件？

回答

相关问题