<script language="JavaScript">
function checkBlocking() {
var checked_count = 0;
for (i = 1; i <= 6; i++){
if (document.getElementById('model'+i).checked)
checked_count++;
}
if (checked_count >= 3){
for (i = 1; i <= 6; i++){
if (!document.getElementById('model'+i).checked)
document.getElementById('model'+i).disabled = true;
}
}
else {
for (i = 1; i <= 6; i++){
document.getElementById('model'+i).disabled = false;
}
}
}
</script>
<form action="/index.xml" method="post">
<div>
Какой-то вопрос....
</div>
<!-- несколько вариантов -->
<input type="checkbox" id="model1" value="1" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model2" value="2" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model3" value="3" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model4" value="4" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model5" value="5" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model6" value="6" onClick="checkBlocking()"/><br>
<input type="submit" value="submit"/>
</form>
JavaScript - Как посчитать включенные checkbox'ы
Есть форма, например:
<form action="/index.xml" method="post">
<div>
Какой-то вопрос....
</div>
<!-- несколько вариантов -->
<input type="checkbox" id="model1" value="1" /><br>
<input type="checkbox" id="model2" value="2" /><br>
<input type="checkbox" id="model3" value="3" /><br>
<input type="checkbox" id="model4" value="4" /><br>
<input type="checkbox" id="model5" value="5" /><br>
<input type="checkbox" id="model6" value="6" /><br>
<input type="submit" value="submit"/>
</form>
Нужно, чтоб можно было включить не более 3-х вариантов. Как сделать с помощью javascript?
<form action="/index.xml" method="post">
<div>
Какой-то вопрос....
</div>
<!-- несколько вариантов -->
<input type="checkbox" id="model1" value="1" /><br>
<input type="checkbox" id="model2" value="2" /><br>
<input type="checkbox" id="model3" value="3" /><br>
<input type="checkbox" id="model4" value="4" /><br>
<input type="checkbox" id="model5" value="5" /><br>
<input type="checkbox" id="model6" value="6" /><br>
<input type="submit" value="submit"/>
</form>
Нужно, чтоб можно было включить не более 3-х вариантов. Как сделать с помощью javascript?
циклом по чекбоксам и проверяешь свойство checked
Код:
Примерно вот так. Только я не мастер в ЖаваСкрипт, качества не гарантирую.
Rebbit, спасибо. Это то, что нужно :)
Rebbit, и не лень тебе было писать готовое решение? а дать человеку пораскинуть m0zg'ом? =)
Цитата: Тень Пса
Rebbit, и не лень тебе было писать готовое решение? а дать человеку пораскинуть m0zg'ом? =)
Лень, конечно :).
Зато размялся. Да и мало ли, может не знает как onClick навешать или с disabled не знаком. Я вот постоянно пишу enabled = false, а потом матерюсь про себя. А так пусть лутше m0zg'ом розберется в примере.
Разобрался =)
Вопрос в продолжение темы. Нужно, чтобы кнопка submit была неактивной до тех пор, пока не будут выбраны 3 checkbox. Дописал 2 строчки, но есть проблема: при первоначальной загрузке страницы кнопка submit активна, если же отметить и снять отметку, то тогда кнопка submit будет неактивна. Что нужно дописать, чтобы при загрузке страницы кнопка submit автоматически была неактивна?
Код:
<script language="JavaScript">
function checkBlocking() {
var checked_count = 0;
for (i = 1; i <= 6; i++){
if (document.getElementById('model'+i).checked)
checked_count++;
}
if (checked_count >= 3){
for (i = 1; i <= 6; i++){
if (!document.getElementById('model'+i).checked)
document.getElementById('model'+i).disabled = true;
document.getElementById('submit').disabled = false;
}
}
else {
for (i = 1; i <= 6; i++){
document.getElementById('model'+i).disabled = false;
document.getElementById('submit').disabled = true;
}
}
}
</script>
<form action="/index.xml" method="post">
<div>
Какой-то вопрос....
</div>
<!-- несколько вариантов -->
<input type="checkbox" id="model1" value="1" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model2" value="2" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model3" value="3" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model4" value="4" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model5" value="5" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model6" value="6" onClick="checkBlocking()"/><br>
<input type="submit" id="submit" value="submit"/>
</form>
function checkBlocking() {
var checked_count = 0;
for (i = 1; i <= 6; i++){
if (document.getElementById('model'+i).checked)
checked_count++;
}
if (checked_count >= 3){
for (i = 1; i <= 6; i++){
if (!document.getElementById('model'+i).checked)
document.getElementById('model'+i).disabled = true;
document.getElementById('submit').disabled = false;
}
}
else {
for (i = 1; i <= 6; i++){
document.getElementById('model'+i).disabled = false;
document.getElementById('submit').disabled = true;
}
}
}
</script>
<form action="/index.xml" method="post">
<div>
Какой-то вопрос....
</div>
<!-- несколько вариантов -->
<input type="checkbox" id="model1" value="1" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model2" value="2" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model3" value="3" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model4" value="4" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model5" value="5" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model6" value="6" onClick="checkBlocking()"/><br>
<input type="submit" id="submit" value="submit"/>
</form>
нужно дописать в html:
<input type="submit" id="submit" value="submit" disabled="disabled"/>
<input type="submit" id="submit" value="submit" disabled="disabled"/>
Цитата: Rebbit
Код:
<script language="JavaScript">
function checkBlocking() {
var checked_count = 0;
for (i = 1; i <= 6; i++){
if (document.getElementById('model'+i).checked)
checked_count++;
}
if (checked_count >= 3){
for (i = 1; i <= 6; i++){
if (!document.getElementById('model'+i).checked)
document.getElementById('model'+i).disabled = true;
}
}
else {
for (i = 1; i <= 6; i++){
document.getElementById('model'+i).disabled = false;
}
}
}
</script>
<form action="/index.xml" method="post">
<div>
Какой-то вопрос....
</div>
<!-- несколько вариантов -->
<input type="checkbox" id="model1" value="1" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model2" value="2" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model3" value="3" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model4" value="4" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model5" value="5" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model6" value="6" onClick="checkBlocking()"/><br>
<input type="submit" value="submit"/>
</form>
function checkBlocking() {
var checked_count = 0;
for (i = 1; i <= 6; i++){
if (document.getElementById('model'+i).checked)
checked_count++;
}
if (checked_count >= 3){
for (i = 1; i <= 6; i++){
if (!document.getElementById('model'+i).checked)
document.getElementById('model'+i).disabled = true;
}
}
else {
for (i = 1; i <= 6; i++){
document.getElementById('model'+i).disabled = false;
}
}
}
</script>
<form action="/index.xml" method="post">
<div>
Какой-то вопрос....
</div>
<!-- несколько вариантов -->
<input type="checkbox" id="model1" value="1" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model2" value="2" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model3" value="3" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model4" value="4" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model5" value="5" onClick="checkBlocking()"/><br>
<input type="checkbox" id="model6" value="6" onClick="checkBlocking()"/><br>
<input type="submit" value="submit"/>
</form>
Примерно вот так. Только я не мастер в ЖаваСкрипт, качества не гарантирую.
Да не совсем наглядно))))) и чёто намудрено тут? По сути то всё верно, код правильно вроде собран.