Question

我遇到一个问题，我想在用户未从selectbox中选择任何服务时显示错误。我有两个Nails和Hair复选框，当用户选择Nails复选框时，用户必须从selectbox中选择服务。如果用户未选中“头发”复选框，则选择框不是必需的，位于“头发”下方。如果两者都被选中，则必须使用span serror message选择以下两个服务。这是我的HTML： -

enter code here
<div class="one-row">
<div class="div_img_part-2">
    <span class="img_part_class-2"><img src="http://localhost:8000/images/ServiceImages/48031.png">
    </span>
    <span class="text_part_class-2">
        <p class="custom-checkbox firstpart">
            <input class="firstdisable" type="checkbox" id="0" name="services[]" value="1">
            <label for="0">Nails</label>
        </p>
    </span>
    <select id="checkSelect-0" name="service_type[Nails]" class="selectpicker" style="display: none;">
        <option value="">Select Service</option>
        <option value="Salon">Salon</option>
        <option value="Mobile beautician">Mobile beautician</option>
        <option value="Both">Both</option>
    </select>
    <div class="btn-group bootstrap-select">
        <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="checkSelect-0" title="Select Service"><span class="filter-option pull-left">Select Service</span>&nbsp;<span class="caret"></span></button>
        <div class="dropdown-menu open">
            <ul class="dropdown-menu inner selectpicker" role="menu">
                <li rel="0" class="selected"><a tabindex="0" class="" style=""><span class="text">Select Service</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
                <li rel="1"><a tabindex="0" class="" style=""><span class="text">Salon</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
                <li rel="2"><a tabindex="0" class="" style=""><span class="text">Mobile beautician</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
                <li rel="3"><a tabindex="0" class="" style=""><span class="text">Both</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
            </ul>
        </div>
    </div>
    <span id="serviceError-0" style="color: rgb(169, 68, 66);">Please select service</span>
</div>
<div class="div_img_part-2">
    <span class="img_part_class-2"><img src="http://localhost:8000/images/ServiceImages/55643.png">
    </span>
    <span class="text_part_class-2">
        <p class="custom-checkbox firstpart">
            <input class="firstdisable" type="checkbox" id="1" name="services[]" value="2">
            <label for="1">Hair</label>
        </p>
    </span>
    <select id="checkSelect-1" name="service_type[Hair]" class="selectpicker" style="display: none;">
        <option value="">Select Service</option>
        <option value="Salon">Salon</option>
        <option value="Mobile beautician">Mobile beautician</option>
        <option value="Both">Both</option>
    </select>
    <div class="btn-group bootstrap-select dropup">
        <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="checkSelect-1" title="Salon" aria-expanded="false"><span class="filter-option pull-left">Salon</span>&nbsp;<span class="caret"></span></button>
        <div class="dropdown-menu open" style="max-height: 519.375px; overflow: hidden; min-height: 92px;">
            <ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 507.375px; overflow-y: auto; min-height: 80px;">
                <li rel="0" class=""><a tabindex="0" class="" style=""><span class="text">Select Service</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
                <li rel="1" class="selected"><a tabindex="0" class="" style=""><span class="text">Salon</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
                <li rel="2"><a tabindex="0" class="" style=""><span class="text">Mobile beautician</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
                <li rel="3"><a tabindex="0" class="" style=""><span class="text">Both</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
            </ul>
        </div>
    </div>
    <span id="serviceError-1" style="color:#A94442; display:none;">Please select service</span>
</div>

图像： -

现在您看到每个类别都有自己的选择框这是我的jquery代码： -

$("#checkservice").on('click',function() { // click event on submit button
    var n = $( "input:checked" ).length; //
    if(n == 0) {
        alert("Please Select atleast One Service"); return false;
    }

    for (var i = 0; i <= 1; i++) {
        if ($('#'+i).is(":checked")) {
            if ($("#checkSelect-"+i).val() === "") {
                $("#serviceError-"+i).show();
                return false;
            }             
        }
    }
});

这个jquery代码仅适用于第一个复选框，当我选择钉子而不选择任何服务时它会显示错误但是当我选择头发复选框时它没有显示错误

图像： -

我正在使用laravel框架。请帮帮我

Answer 1

＆＃13;

function onSubmit() 
{ 
  var fields = $("input[name='list']").serializeArray(); 
  if (fields.length == 0) 
  { 
    alert('nothing selected'); 
    // cancel submit
    return false;
  } 
  else 
  { 
    alert(fields.length + " items selected"); 
  }
}

// register event on form, not submit button
$('#subscribeForm').submit(onSubmit)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="subscribeForm">
    <fieldset id="cbgroup">
        <div><input name="list" id="list0" type="checkbox"  value="newsletter0" >zero</div>
        <div><input name="list" id="list1" type="checkbox"  value="newsletter1" >one</div>
        <div><input name="list" id="list2" type="checkbox"  value="newsletter2" >two</div>
    </fieldset>
    <input name="submit" type="submit"  value="submit">
</form>

＆＃13;

从选择框中未选择任何选项时显示错误

1 个答案: