.on（單擊），屬性設置不起作用

Question

我正在嘗試在復選框上設置“已檢查”屬性。

編碼：

$(".ui.toggle" ).on( "click", function() {

  if ($('#ownplace').not(':checked')) {
    $('#ownplace').attr('checked', true );
  }
  else {
    $('#ownplace').prop('checked', false);
  }

});

它會選中該復選框，但是不會取消選中。 我嘗試了多種解決方案，包括使用attr而不是prop-是的，我進行了搜索，但是似乎沒有任何東西可以澄清這個特殊問題。

編輯

我需要能夠捕獲是否已選中該復選框，如下所示：

if($data['ownplace'] == checked) {
      $user->ownplace = $data['ownplace'];
 }

這可以正常工作： $('#ownplace').prop('checked', !$('#ownplace').is(':checked')); 但是它沒有在字段上設置checked屬性，所以我不能檢查它是否被選中。

沒有一種解決方案可以在輸入字段上設置“ checked="checked" ，以便on click時使<input class="ownplace" type="checkbox">會被<input class="ownplace" type="checkbox"> <input class="ownplace" type="checkbox" checked="checked"> 。

.prop並不會那樣做，我猜只能切換CSS。

帕特里克

Answer 1

使用prop()函數代替：

$('#ownplace').prop('checked', true );

說明

使用attr（）也會起作用（但是您的if子句錯誤），但是最建議使用prop（）。

如果要檢查復選框的狀態，請使用is(:checked)

if (!$('#ownplace').is(':checked')) {
   $('#ownplace').prop('checked', true );
}

Answer 2

變更：

 $('#ownplace').attr('checked', true );

至 ：

 $('#ownplace').prop('checked', true );

Answer 3

您應該使用prop而不是attr

$('#ownplace').prop('checked', true );

attr僅適用於jQuery 1.6或更低版本

Answer 4

問題很可能與if條件有關。 采用：

!$('#ownplace').is(':checked')   //instead of $('#ownplace').not(':checked')

然后使用以下命令選中該復選框：

$('#ownplace').prop('checked', true );

Answer 5

看來.ui.toggle的queryselector可能會引起一些問題。 這是JSFiddle，在這里您可以看到.ui-toggle代碼可以正常工作，但.ui.toggle則不能。

https://jsfiddle.net/krnitesh/uovoykya/

<button class="ui.toggle" >Click Me</button>
<input type="checkbox" id="ownplace" checked="true" />

<button class="ui-toggle" >Click Me</button>
<input type="checkbox" id="ownplace2" checked="true" />
$('.ui.toggle' ).on("click", function() {
console.log(($('#ownplace').is(':checked')));

$('#ownplace').prop("checked", !($('#ownplace').is(':checked')));

});

$('.ui-toggle' ).on("click", function() {
console.log(($('#ownplace2').is(':checked')));

$('#ownplace2').prop("checked", !($('#ownplace2').is(':checked')));

});