Question

我想只允许选择1个复选框。我使用以下脚本：

$(document).ready(function(){                   
    $('#valores input').on('change', function() {
        $('#valores input').not(this).prop('checked', false);  
    });
});

和HTML：

<div id="valores">              
    <div><input type="checkbox" name="valor" id="50reais" class="css-checkbox"/><label for="50reais" class="css-label radGroup1">R$ 50,00</label></div>
    <div><input type="checkbox" name="valor" id="100reais" class="css-checkbox"/><label for="100reais" class="css-label radGroup1">R$ 100,00</label></div>
    <div><input type="checkbox" name="valor" id="150reais" class="css-checkbox"/><label for="150reais" class="css-label radGroup1">R$ 150,00</label></div>
    <div><input type="checkbox" name="valor" id="200reais" class="css-checkbox"/><label for="200reais" class="css-label radGroup1">R$ 200,00</label></div>
    <div><input type="checkbox" name="valor" id="250reais" class="css-checkbox"/><label for="250reais" class="css-label radGroup1">R$ 250,00</label></div>
    <div><input type="checkbox" name="valor" id="outroValor" class="css-checkbox"/><label for="outroValor" class="css-label radGroup1">Outro Valor</label></div>
</div>

仅在加载页面时有效。准备好后停止工作。

解决！我在代码中留下了一个不必要的脚本，导致了这个问题。

谢谢大家！

Answer 1

听起来你的页面可能在加载后动态更新。

将其更改为使用附加到不变的祖先元素的委托事件处理程序：

import android.app.Activity;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.os.Bundle;
import android.widget.TextView;

import com.mlaffan.giftpal.sqlite.db.DatabaseHelper;

/**
 * Created by Mark on 05/05/2015.
 */
public class Profile extends Activity  {

    protected TextView profileFirst;
    protected TextView profileLast;
    protected TextView profileBirthday;
    protected TextView profileSex;
    protected int profileId;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.profile_view);

        profileId = getIntent().getIntExtra("PERSON_ID", 0);
        SQLiteDatabase db = (new DatabaseHelper(this)).getWritableDatabase();
        Cursor cursor = db.rawQuery("SELECT _id, firstName, lastName, sex, birthday FROM people WHERE _id = ?",
                new String[]{""+profileId});

        if (cursor.getCount() == 1){
            cursor.moveToFirst();

            profileFirst = (TextView) findViewById(R.id.profileFirst);
            profileFirst.setText(cursor.getString(cursor.getColumnIndex("firstName")));

            profileLast = (TextView) findViewById(R.id.lastName);
            profileLast.setText(cursor.getString(cursor.getColumnIndex("lastName")));

            profileSex = (TextView) findViewById(R.id.profileSex);
            profileSex.setText(cursor.getString(cursor.getColumnIndex("sex")));

            profileBirthday = (TextView) findViewById(R.id.profileBirthday);
            profileBirthday.setText(cursor.getString(cursor.getColumnIndex("birthday")));


        }
    }
}

JSFiddle： http://jsfiddle.net/TrueBlueAussie/hrahs1gu/

还会在加载后查看您的页面DOM（例如Chrome F12 DOM检查器），因此请查看这些元素是否符合预期。

Answer 2

HTML代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="app2.js"></script>
</head>
<body>
  <div>
    <h3>Fruits</h3>
    <label>
      <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi</label>
    <label>
      <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit</label>
    <label>
      <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango
    </label>
  </div>
</body>
</html>

Javascript代码

$(document).ready(function(){
  $("input:checkbox").on('click', function() {
    // in the handler, 'this' refers to the box clicked on
    var $box = $(this);
    console.log($box);
    if ($box.is(":checked")) {
      // the name of the box is retrieved using the .attr() method
      // as it is assumed and expected to be immutable
      var group = "input:checkbox[name='" + $box.attr("name") + "']";
      // the checked state of the group/box on the other hand will change
      // and the current value is retrieved using .prop() method
      $(group).prop("checked", false);
      $box.prop("checked", true);
    } else {
      $box.prop("checked", false);
    }
  });
});

只允许选中1个复选框

2 个答案: