Question

我已经使用dropdownlist onchange方法使用jQuery提交了表单，该方法工作正常。另外，我想在选择值时使用相同的下拉列表onchange事件启用复选框以及表单提交。

我的表格是，

{!! Form::open( array('route' => array('main.customerequipment.search',$customer_id), 'id'=>'equipment_form', 'name'=>'equipment_form', 'data-toggle'=>"validator") ) !!}

    {!! Form::select('filter_by', @$owner_name,'', array('id'=>'filter_by', 'placeholder'=>trans('main.all'), 'class' => 'form-control')) !!}

{!! Form::close() !!}

以下是我的代码：

$("#filter_by").on("change", function () {
    localStorage.realOwnerFilter = $('select[name^="filter_by"] option:selected').val();
    $("#equipment_form").submit();
    if($(this).val() == '')
    { 
        $("#download_certificate").attr('disabled','disabled');
        $(".select_all").attr('disabled','disabled');
        $(".select_particular").attr('disabled','disabled');
        $(".select_all").prop('checked',false);
        $(".select_particular").prop('checked',false);
    }   
    else
    {
        $(".select_all").removeAttr("disabled");
        $(".select_particular").removeAttr("disabled");
    }
});

注意：当我排除下面的行时，启用/禁用复选框可以正常工作，

$("#equipment_form").submit();

当我包含该特定行时，我的复选框无法正常工作。我认为问题出在表单提交上，我不太确定。

Answer 1

在表单中添加onSubmit：

<form id="equipment_form" onSubmit="mySubmit(event)">

你的下拉列表onChange将是：

$("#filter_by").on("change", function () {
localStorage.realOwnerFilter = $('select[name^="filter_by"] option:selected').val();
$("#equipment_form").submit();
}

mySubmit功能将是：

function mySubmit(event) {
if ($("#filter_by").val() == '') {
    $("#download_certificate").attr('disabled', 'disabled');
    $(".select_all").attr('disabled', 'disabled');
    $(".select_particular").attr('disabled', 'disabled');
    $(".select_all").prop('checked', false);
    $(".select_particular").prop('checked', false);
} else {
    $(".select_all").removeAttr("disabled");
    $(".select_particular").removeAttr("disabled");
}
event.preventDefault();
}

Answer 2

我使用下面给出的代码解决了上述问题：

我刚在document.ready（function（）），

中写下了这些行

document.ready(function(){        
    var real_owner = localStorage.realOwnerFilter;
    if(real_owner =='' || real_owner == undefined )
    {
        $(".checkboxToggle").hide();
        $(".realOwner").hide();
        $(".select_particular").hide();
        $("#download_certificate").attr('disabled','disabled');
    }
    else 
    {
        $(".checkboxToggle").show();
        $(".realOwner").show();
        $(".select_particular").show();
    } 
});

$("#filter_by").on("change", function () {
    localStorage.realOwnerFilter = $('select[name^="filter_by"] option:selected').val();
    $("#equipment_form").submit();
});

在jQuery中的更改事件的下拉列表中启用/禁用复选框以及表单提交

2 个答案: