验证后的JavaScript切换模式显示

Question

我正在通过模式提交表单。 根据用户输入，一些数据将需要发送到模态。 我需要在加载模态之前验证数据。 当前代码阻止在未选择任何订单的情况下显示模式，但是一旦用户选择了一些订单并重新提交表单，该模式仍然不会显示。

JS

function batchHoldModalLauncher($hold_name){

// get modal id
var modal_id = "#"+$hold_name+"_modal_id";

// check if any orders are selected
if ($("#order_hold_table_body input:checkbox:checked").length > 0)
{
    $(modal_id).modal('show');
}
else
{
    // no boxes checked
    $('.modal').on('show.bs.modal', function() {
        return false;
    });

    alert('Choose some orders to put on hold');
}
}

Laravel PHP代码，其中提交了表单并调用了模式

<div class="col-md-3" style="margin-top: 20px;">
{!! Form::open(['url' => '/hold', 'method' => 'POST', 'class' => 'form-inline']) !!}
<h4>
    Orders for Batch {{ $batch->id }}
    <div class="btn-group">
        <button type="button" class="btn btn-sm btn-danger dropdown-toggle" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
            Hold <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-danger">
            @foreach($holds as $hold)
                <?php $hold_name = str_replace(' ', '', $hold->name); ?>
                <li><a href="#" data-toggle="modal" onclick="batchHoldModalLauncher('{{ $hold_name  }}')"
                       data-target="#modal{{ $hold_name }}">{{ $hold->name }}</a></li>
            @endforeach
        </ul>
    </div>
</h4>
<!-- Show each order in batch and allow user to place orders on hold -->
<table class="table table-striped" id="order_hold_table">
    <thead>
    <th>Order Number</th>
    <th>Hold
        <!-- de/select all checkboxes -->
        {!! Form::checkbox('hold_toggle', null, false, [
            'class'=>'toggle-button',
            'style'=>'float:right'
        ]) !!}</th>
    </thead>

    <tbody id="order_hold_table_body">
    @foreach($orders as $o)
        <tr>
            <td>
                @if($type == 'receiving')
                    {{ $o->id }}
                @elseif($type == 'sales')
                    {{ $o->order_number }}
                @endif
            </td>
            <td>
                {!! Form::checkbox('hold[]', $o->id, false, ['style'=>'float:right']) !!}
            </td>
        </tr>
    @endforeach
    </tbody>
</table>
{!! Form::close() !!}

Answer 1

@BrentConnor，根据您在聊天室中的消息，我正在发布您的解决方案作为答案。

似乎您一直在使用我在https://stackoverflow.com/a/27868091/3869056中提供的原始代码来阻止在发生特定操作时打开模态，即使该操作固有地被视为有效触发器也是如此。 正如您在我的回答中指出的那样，它实际上破坏了打开模式的能力。

而不是为操作返回false ，您应该在确定子对象是否符合阻止启动模式的要求的同时将父对象定位为测试对象，并stopPropagation()其父对象的stopPropagation() 。

$('.modal_launcher').click(function(e) {
    // check if any orders are selected
    if($("#order_hold_table_body input:checkbox:checked").length > 0) {
        // append order numbers to the appropriate hold modal
    } else {
        // no orders selected -> alert user & prevent modal.
        e.stopPropagation();
        alert('Choose some orders to put on hold');
    }
}

对不起，我一直没有更加积极地帮助您解决问题，但是我很高兴我的建议将您引向了解决方案。 :)