如何在js中的复选框数组上将选中的属性设置为false

Question

My chechkbox

  <div class="col-md-3" style="padding-left:15 !important;">
                            <div class="icheckbox_minimal-grey checked disabled" style="position: relative;"><input class="alanlar" type="checkbox" disabled="" name="gunlukAlanlar[]" value="tarih" checked="" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                            <label class="control-label" style="margin-left: 5px;color:red;">Tarih</label>
                            </div>
<div class="col-md-3" style="padding-left:15 !important;">
                        <div class="icheckbox_minimal-grey checked disabled" style="position: relative;"><input class="alanlar" type="checkbox" disabled="" name="gunlukAlanlar[]" value="saat" checked="" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                        <label class="control-label" style="margin-left: 5px;color:red;">Saat</label>
                        </div>
<div class="col-md-3" style="padding-left:15 !important;">
                        <div class="icheckbox_minimal-grey checked disabled" style="position: relative;"><input class="alanlar" type="checkbox" disabled="" name="gunlukAlanlar[]" value="Order Adı" checked="" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                        <label class="control-label" style="margin-left: 5px;color:red;">Order Adı</label>
                        </div>

JQuery Lib

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 

Js Code

$("input[name='gunlukAlanlar[]']")[2].prop("checked", false);

But its not working.I'm want unchecked have index 2.But its not working.

Please review image

Answer 1

Instead of referencing an array index on a jQuery element collection (which doesn't work anyways) - stick with JQ and use .eq()

Also your code was setting an invisible checkbox ( opacity: 0 ) to false ( prop("checked", false); ) - when they were all unchecked to begin with so...

In this, I've set it so 'checked' checkboxes are visible. That is just a css class so it's easy to get rid of.

 $("input[name='gunlukAlanlar[]']").eq(1).prop("checked", false);

 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <label><input class="alanlar" type="checkbox" name="gunlukAlanlar[]" id="gunlukAlanlar[]" checked value="saat" /> //index 0</label> <label><input class="alanlar" checked type="checkbox" name="gunlukAlanlar[]" id="gunlukAlanlar[]" value="modelii">//index 1</label> <label><input class="alanlar" checked type="checkbox" name="gunlukAlanlar[]" id="gunlukAlanlar[]" value="tarih">//index 2</label> <label><input class="alanlar" checked type="checkbox" name="gunlukAlanlar[]" id="gunlukAlanlar[]" value="musteri">//index 3</label>