Radio input(materialize) animation does not track properties

Asked

Viewed 118 times

2

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

A sample of what occurs:

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

jquery materialize radiobutton
  • 1

    +1 for the good example of the problem so we can test!

1 answer

1


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

In both cases you do not need to remove from the previously selected since in HTML inputs radio are already doing it automatically.

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

Using the .prop() 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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body>

</html>

Second example, using the position of the elements in the DOM, ie taking into account the organization of HTML:

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

</html>

Browser other questions tagged jquery materialize radiobutton

You are not signed in. Login or sign up in order to post.