Question

我正在尝试设置＆＃34;已检查＆＃34;的属性在一个复选框上。

代码：

$(".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" 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')));

});

.on（单击），属性设置不起作用

5 个答案: