Разрешить выбор только 1 checkbox

Я хочу разрешить выбор только 1 флажок. Я использую следующий скрипт:Разрешить выбор только 1 checkbox

$(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>

только работает во время загрузки страницы. После того, как готовые остановки работают.

Решенный! Был лишний сценарий, который я оставил в коде и вызывал эту проблему.

Спасибо за все!

источник

2015-05-05 Alex Cambuy

прекрасно работает здесь http://jsfiddle.net/khLgjpmb/ –

Вы создаете входы с JavaScript, или все они являются частью DOM при загрузке? – Archer

Почему бы не использовать радиокнопки, которые предназначены для вашей ситуации? – lshettyl

Похоже, ваша страница может обновляться динамически после загрузки.

Изменить это использовать делегированный обработчик события, прикрепленный к не меняющемуся предку элемент:

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

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

также просматривать страницы DOM (например, Chrome F12 DOM Inspector) после загрузки, так что посмотрите, являются ли элементы ожидаемыми.

источник

2015-05-05 15:06:17

Решенный! Был лишний сценарий, который я оставил в коде и вызывал эту проблему. Спасибо! –

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); 
    } 
    }); 
});

источник

2015-05-05 15:17:42

Протестировано локально, работает как шарм. –

Исходный код (намного короче) также «работает». Очевидно, что существует еще одна проблема, если она «перестает работать после загрузки страницы». –

Решенный! Был лишний сценарий, который я оставил в коде и вызывал эту проблему. Спасибо! –

Разрешить выбор только 1 checkbox

ответ

Смежные вопросы