Estou tentando manipular o input radio dinamicamente e a propriedade(checked) do elemento esta sendo manipuladas corretamente, porém a animação do campo não acompanha essa dinâmica, na primeira vez sim, porém das outras não. Faço uso do framework materialize
Um amostra do que ocorre:
$(document).ready(function() {
$('#b1').click(function() {
$('#1').attr('checked', '');
$('#2, #3').removeAttr('checked');
});
$('#b2').click(function() {
$('#2').attr('checked', '');
$('#1, #3').removeAttr('checked');
});
$('#b3').click(function() {
$('#3').attr('checked', '');
$('#1, #2').removeAttr('checked');
});
});
<!DOCTYPE html>
<html>
<header>
<title>Erro input radio</title>
<meta content="charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
</header>
<body>
<div class="row">
<div class="col offset-s6 s6">
<p>
<input id="1" type="radio" name="polonia">
<label for="1">Um</label>
</p>
<p>
<input id="2" type="radio" name="polonia">
<label for="2">Dois</label>
</p>
<p>
<input id="3" type="radio" name="polonia">
<label for="3">Três</label>
</p>
<button id="b1" class="btn">1</button>
<button id="b2" class="btn">2</button>
<button id="b3" class="btn">3</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body>
</html>
+1
pelo bom exemplo do problema para podermos testar!