4

I have a button that opens a dialog. I only want it to open when the button isn't disabled (either with the css class or with the disable property on the span element. Is that possible? I think it's no possible and I can only fix it by removing the nice data-toggle="modal" feature, and do that part with my own javascript. I would prefer getting the best from both.

Button:

<span title="View Package Log" data-toggle="tooltip">
    <span id="logComputerPackageComputerAndDevice" 
          data-toggle="modal" 
          data-target="#computerPackgageLogDialog" 
          class="btn btn-primary disabled" 
          disabled>
        <i class="fa fa-file-text-o"></i> Package Log
    </span>
</span>

Modal dialog:

<!-- Modal -->
<div id="computerPackgageLogDialog" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="computerPackgageLogDialogHeader"></h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        @Html.TextArea("computerPackgageLogContent", "", new { @class = "form-control", rows = "20", @readonly = "readonly" })
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

UPDATE: JavaScript Event Handling added:

$('body').on('click', '#logComputerPackageComputerAndDevice:not(.disabled)', function () {
        // I don't enter here which is fine, but THE DIALOG STILL OPENS.
});
radbyx
  • 9,352
  • 21
  • 84
  • 127
  • 1
    Would this be triggered by an event? If so, your best option in this case would be using JavaScript to disable the button. You can use JavaScript to raise a `disabled` flag in a ` – Dandy Jan 14 '16 at 09:39
  • I think it's the html5 data-toggle="modal" that trigger it. – radbyx Jan 14 '16 at 09:41
  • `disabled` attribute is applicable only for button or input tag with type button. On span tag you need to do JS trick to achieve this or wrap the span tag with button being parent element and add `disabled` attribute – NiRUS Jan 14 '16 at 09:44
  • I have added my event handler function. I don't get into that, and that's fine. – radbyx Jan 14 '16 at 09:46
  • Additionally, if you think the 'data-toggle' is triggering the tag and forcing the disable to be ignored. I haven't used it in this context, but this link might be a useful read. http://stackoverflow.com/questions/12286332/twitter-bootstrap-remote-modal-shows-same-content-everytime (but I'm pretty sure just can't use the disabled property. – Dandy Jan 14 '16 at 09:47
  • Adding "disabled" to the outer-span didn't do a different. I also tryed changing both span's to a div. – radbyx Jan 14 '16 at 09:50

2 Answers2

11

you could try adding some pointer events with css

.btn.disabled {
    pointer-events: none;
}
radbyx
  • 9,352
  • 21
  • 84
  • 127
keja
  • 1,333
  • 1
  • 14
  • 21
  • Am I supposed to see anything in the "Run code snippet"? It's totally blank here. – radbyx Jan 14 '16 at 09:51
  • Oh this seems to work. Let me test a couple of times more – radbyx Jan 14 '16 at 09:54
  • did not mean to create a snippet, just wanted to show the css, my bad ;) – keja Jan 14 '16 at 09:55
  • This is a great solution thanks alot. I can control it one place with CSS and give the same behavior to all my buttons and even without any customize javascript. I don't see any cons. – radbyx Jan 14 '16 at 09:58
0

The disabled attribute wount work on a span element. When present, it specifies that the input or button element should be disabled.

W3Schools.com

So try an input element. Bootsrapt uses an button for modals.

Example

Steven Web
  • 1,966
  • 13
  • 23