How to disable and enable the .click () function of a span when I click on another span using on () off ()

Question

How to disable and enable the .click () function of a span when I click on another span using on () off ()

Navigation

#1 by (2 votes)

0

I have two spans that work like buttons, clicking on them will appear an input to put an email and if you click again it hides those inputs.

I was able to do the following:

Click on span1 - > It appears input1 and disables span2, and if you click again it hides input1 but does not enable span2

And I would like that by clicking on it again and hiding the input1 it enables span2, a kind of toggle() on off();

Follow JS:

$('.new-step-email-aluno').hide();
		$('#btn-aluno').on('click', function() {
			$('.new-step-email-aluno').toggle();
			$('#btn-familiar').off();
		});

		$('.new-step-email-familiar').hide();
		$('#btn-familiar').on('click', function() {
			$('.new-step-email-familiar').toggle();
			$('#btn-aluno').off();
		});

I do not know if it's clear, I'll sort it out. vlw

javascript jquery

asked by anonymous 26.02.2016 / 17:18

1 answer

Form with multiple windows performFetchWithCompletionHandler not being called into production

score 2 · Answer 1

Follow a solution

$(function() {

  var $buttons = $('#btn-aluno,#btn-familiar');
  var $input = $('.new-step-email-aluno, .new-step-email-familiar');

  $buttons.on('click', function(e) {

    var $self = $(this);
    var active = $self.is('.active');
    var aluno = $self.is('#btn-aluno');
    var already = $('#btn-aluno.active , #btn-familiar.active').size() > 0;
    //Desabilita o click se houver um ativo.
    if (!active && already)
      return;

    if (!active) {

      if (aluno) {
        $('.new-step-email-aluno').show();
        $('.new-step-email-familiar').hide();
      } else {
        $('.new-step-email-aluno').hide();
        $('.new-step-email-familiar').show();

      }
    } else
      $input.hide();

    $buttons.removeClass('active');

    if (!active)
      $self.addClass('active');

  });

});

form { text-align:center;}
#btn-aluno , #btn-familiar { cursor: pointer; }
.new-step-email-familiar , .new-step-email-aluno { display:none;}
.active { border: 2px solid #333 !important; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.2.2/css/flat-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><spanid="btn-aluno" class="btn btn-primary">Sou aluno</span><br> <input type="text" name="fname" class="new-step-email-aluno"><br>
<span id="btn-familiar" class="btn btn-primary">Sou familiar</span><br>
<input type="text" name="fname" class="new-step-email-familiar" ><br>