需要动态复选框值才能更改选择框

时间:2016-09-23 16:17:22

标签: jquery forms post

我有一个涉及laravel和jQuery的问题。

我的表单有一个使用wenzhixin/multiple-select jQuery插件的多选框。

<script>
    $('#multiselect').multipleSelect({
      placeholder: "Select Landing Pages",
      filter: true
    });
</script>

该插件的启用/禁用状态由复选框的:checked /:unchecked属性决定:

<script>
  $("#toggle").click(function() {
    if ($(this).is(":checked")) {
      $('#multiselect').multipleSelect("disable");
    } else {
      $('#multiselect').multipleSelect("enable");  
    }
  });
</script>

最终我需要做的是当加载页面/表单时,需要启用/禁用选择框,具体取决于复选框的初始值:

<select multiple="multiple" id="multiselect" name="landings[]" {{ ($post->global == "1") ? "disabled='disabled'" : '' }}>
          @foreach($landings as $landing)
            <option {{ in_array($landing->id, $post->landings()->select('post_landing.*')->lists('landing_id')->all()) ? 'selected' : '' }} value="{{ $landing->id }}">
              {{ $landing->title }}
            </option>
          @endforeach
        </select>
<label style="display: inline-block; font-size: .7em;">Global Post: </label>
          {!! Form::hidden('global', 0) !!}
          {!! Form::checkbox('global', 1, $post->global, ['id' => 'toggle']) !!}

有效。现在,让我们说$ post-&gt; global的值是&#34; 1&#34; (并选中该框):如果我想取消选中它,然后在选择框中选择一些选项,然后通过POST提交表单,则不会发送选择框的值。虽然,在我的POST请求中,我可以看到$ post-&gt;全局值正确发送(global =&gt;&#34; 0&#34;)...但是就像我说的那样,请求没有显示选择值数组。

在相反的情况下,一切都按预期工作:如果$ post-&gt; global的初始值是&#34; 0&#34; (并且未选中此框)我可以将复选框设置为&#34;选中&#34;并提交表格,$ post-global的请求是&#34; 1&#34;。同样,我也可以不选中该框并选择一些值,并使用值数组发送请求。我相信问题就在这里:

 <select multiple="multiple" id="multiselect" name="landings[]" {{ ($post->global == "1") ? "disabled='disabled'" : '' }}>

但如果这不起作用,如何根据复选框的值将我的选择框的初始状态设置为禁用/启用?

这是一个小提琴:https://jsfiddle.net/o95nhfaw/1/

1 个答案:

答案 0 :(得分:0)

我明白了。我刚刚在if语句中添加了一行js,如果复选框从初始值更改,则删除disabled属性:

$("#toggle").click(function() {
    if ($(this).is(":checked")) {
      $('#multiselect').multipleSelect("disable");
    } else {
      $('#multiselect').multipleSelect("enable");
      $('#multiselect').removeAttr('disabled');
    }
  });

谢谢!