验证后的 JavaScript 切换模式显示答案

【问题标题】：JavaScript toggle modal show after validation验证后的 JavaScript 切换模式显示
【发布时间】：2016-02-04 01:17:39
【问题描述】：

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

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() !!}

【问题讨论】：

您的浏览器控制台有什么错误吗？
试试console.log($hold_name) 和console.log($("#order_hold_table_body input:checkbox:checked").length) 看看你是否得到了你所期望的。
if 块已按预期运行。刚刚使用 console.log 语句进行了测试。
当重新提交表单并选择订单时，您是否仍然收到警报，或者您只是收到“无”。那么它是否满足 if 语句？
你有小提琴吗？因为我明白，当一个复选框被选中时，在控制台中长度属性返回的东西 > 0?

标签： javascript jquery twitter-bootstrap laravel-5 bootstrap-modal

【解决方案1】：

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

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

与其为action返回false，不如在以child为目标的同时测试parent的stopPropagation()是否满足阻止modal启动的要求。

$('.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');
    }
}

很抱歉，我不能更积极地帮助您解决问题，但我很高兴我的建议引导您找到解决方案。 :)

【讨论】：