Question

我进行了一些jQuery检查，以查看人类何时单击检查按钮，但是如果页面加载时已将按钮标记为已检查，则jQuery无法正常工作。

    $ (function(){
        var requiredCheckboxes = $('.options :checkbox[required]');
        requiredCheckboxes.change(function(){
            if(requiredCheckboxes.is(':checked')) {
                requiredCheckboxes.removeAttr('required');
            } else {
                requiredCheckboxes.attr('required', 'required');
            }
        });
    });

我需要做的是，如果该复选框已被选中，它将删除必需的属性。当将变量发布到页面并且PHP在输入中添加了checked =“ checked”时，为什么它不起作用？

谢谢！

Answer 1

在检查是否选中了单击的复选框时，必须使用this作为选择器。 this是指单击的复选框。您可以使用prop()添加和删除required

var requiredCheckboxes = $('.options');

requiredCheckboxes.change(function() {
  if ($(this).is(':checked')) {
    $(this).prop('required', false);
  } else {
    $(this).prop('required', true);
  }
});

input:required {
  box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>

更新：您可以为所需的复选框使用一个类，并使用prop()添加和删除required属性。

var requiredCheckboxes = $('.required-options')

//On page Loads
if (requiredCheckboxes.is(':checked')) {
  requiredCheckboxes.prop('required', false);
} else {
  requiredCheckboxes.prop('required', true);
}


//Event listener
requiredCheckboxes.change(function() {
  if (requiredCheckboxes.is(':checked')) {
    requiredCheckboxes.prop('required', false);
  } else {
    requiredCheckboxes.prop('required', true);
  }
});

input:required {
  box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='required-options' type="checkbox" required checked>
<input class='required-options' type="checkbox" required>
<input class='required-options' type="checkbox" required>
<input class='required-options' type="checkbox" required>

Answer 2

HTML：

return new GridView.count(
    shrinkWrap: true,
    primary: false,
    childAspectRatio: 2.0,
    crossAxisCount: 3,
    mainAxisSpacing: 10.0,
    children: _kCategoryTiles.map((_FilterItemTile item) {
        return new FlatButton(
    onPressed: () {
        // add code here
        print(item);
        someFunction(item);
    },
    child: new GridTile(
        child: new Container(
            alignment: Alignment.center,
            decoration: new BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: new BorderRadius.all(
                new Radius.elliptical(10.0, 20.0)),
            border: new Border.all(
                color: const Color(0xFF33b17c),
            ),
            ),
            margin: new EdgeInsets.all(10.0),
            child: new Text(
            item.itemName,
            textAlign: TextAlign.center,
            style: new TextStyle(
                color: Colors.black,
                fontSize: 12.0,
                fontFamily: 'helvetica_neue_medium',
                letterSpacing: 0.59,
            ),
            ),
        ),
        );
        )
    }).toList(),
),

js：

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

jsfiddle

为什么jQuery看不到自动选中的复选框？

2 个答案: