Animation of the input radio (materialize) does not accompany the properties

Question

Animation of the input radio (materialize) does not accompany the properties

Navigation

#1 by (1 votes)

2

I'm trying to manipulate the radio input dynamically and the checked property of the element is being manipulated correctly, but the field animation does not follow this dynamic, the first time yes, but the others do not. I use the materialize framework

A sample of what happens:

$(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><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body>

</html>

jquery radiobutton materialize

asked by anonymous 23.12.2016 / 22:45

1 answer

Make sum with SUM () Open an activity with onMarkerClick

score 1 · Accepted Answer

You can use DOM property .checked (see second example) instead of HTML attributes. With jQuery (see first example) this is done with .prop() .

In both cases, you do not need to remove the previously selected one since HTML inputs radio already do this automatically.

The second example is more comprehensive and flexible because it is not limited to N elements or their IDs.

Using .prop() of jQuery:

$(document).ready(function() {
  $('#b1').click(function() {
    $('#1').prop('checked', true);
  });
  $('#b2').click(function() {
    $('#2').prop('checked', true);
  });
  $('#b3').click(function() {
    $('#3').prop('checked', true);
  });
});

<!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><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body>

</html>

Second example, using DOM elements positions, ie taking into account the HTML organization:

$(document).ready(function() {
  var btns = $('.row .btn');
  var inputs = $('.row [type="radio"]');
  btns.each(function(i) {
    $(this).on('click', (function(input) {
      return function() {
        input.checked = true;
      }
    })(inputs[i]));
  });
});

<!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><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body>

</html>