从按钮组中仅选择一个按钮

Question

我想创建一个按钮组，可以一次选择组中的按钮。

假设我们有三个按钮，用户应该只能选择一个按钮，所以如果用户选择＆＃34; Apple＆＃34;然后他们就不能再次选择Apple按钮了。

主要目的是阻止用户选择已经选择的按钮。

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
</div>

我该如何解决这个问题？

Answer 1

这似乎正是你在寻找什么。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Apple
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Samsung
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Sony
  </label>
</div>

您可以阅读有关此under this link的更多信息。这就是它的样子：

Answer 2

你应该以这种方式使用radiobuttons。

mEditTextSearch.addTextChangedListener(new TextWatcher() {

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            if(s.length()>0){
                mEditTextSearch.setCompoundDrawablesWithIntrinsicBounds(null, null, getResources().getDrawable(android.R.drawable.ic_delete), null);
            }else{
                mEditTextSearch.setCompoundDrawablesWithIntrinsicBounds(null, null, getResources().getDrawable(R.drawable.abc_ic_search), null);
            }
        }
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        }
        @Override
        public void afterTextChanged(Editable s) {
        }
    });
    mEditTextSearch.setOnTouchListener(new OnTouchListener() {
        @SuppressLint("ClickableViewAccessibility")
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if(event.getAction() == MotionEvent.ACTION_UP) {
                if(mEditTextSearch.getCompoundDrawables()[2]!=null){
                    if(event.getX() >= (mEditTextSearch.getRight()- mEditTextSearch.getLeft() - mEditTextSearch.getCompoundDrawables()[2].getBounds().width())) {
                        mEditTextSearch.setText("");
                    }
                }
            }
            return false;
        }
    });

body {
	font-family: sans-serif;
	font-weight: normal;
	margin: 10px;
	color: #999;
	background-color: #eee;
}

form {
	margin: 40px 0;
}

div {
	clear: both;
	margin: 0 50px;
}

label {
  width: 200px;
  border-radius: 3px;
  border: 1px solid #D1D3D4
}

input.radio:empty {
	margin-left: -999px;
}

input.radio:empty ~ label {
	position: relative;
	float: left;
	line-height: 2.5em;
	text-indent: 3.25em;
	margin-top: 2em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input.radio:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 2.5em;
	background: #D1D3D4;
	border-radius: 3px 0 0 3px;
}

input.radio:hover:not(:checked) ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #C2C2C2;
}

input.radio:hover:not(:checked) ~ label {
	color: #888;
}

input.radio:checked ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}

input.radio:checked ~ label {
	color: #777;
}

input.radio:focus ~ label:before {
	box-shadow: 0 0 0 3px #999;
}

Answer 3

Button用于按钮

<div class="btn-group btn-group-lg">
          <input type="radio" class="btn btn-primary" value="Apple" name="radio"> Apple
          <input type="radio" class="btn btn-primary" value= "Samsung" name="radio"> Samsung
          <input type="radio" class="btn btn-primary" value "Sony" name="radio"> Sony
</div>

无线电是<input type="radio">。如果您只想检查一台收音机，则必须获得相同的name。

Answer 4

对于Bootstrap 4：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

See the docs