Jump to content
Helio13

Passar botão de disable para enable

Recommended Posts

Helio13

Oi

Estou com um problema que não estou a conseguir resolver, que é o seguinte

Tenho um botão que está disable e quando eu clicar para seleccionar um registos na minha lista ele fica enable

Como por exemplo este exemplo

http://plnkr.co/edit/39KBgMQWfUreOLcP4x9T?p=preview

O que estou a fazer é o seguinte, aqui é onde tenho a minha lista de registos e onde selecciono

<div class="large-5 columns">
	<div class="panel transparent"></div>
	<div class="academy_panel panel id_panel" id="{{academy.id}}"
		 ng-repeat="academy in AcademyResultList.objects | filter:filterAcademy"
		 ng-click="selectAcademy(academy,$index + 1)">
		<img alt="" src="/onpitch/viewAcademy/{{academy.photo}}">
		<h6 class="subheader" id="academy_index">#{{$index + 1}}</h6>
		<h6 class="subheader" id="academy_name">
			<span>{{academy.name}}</span>
		</h6>
		<h6 class="subheader" id="academy_address">
			<span>{{academy.address}}</span>
		</h6>
		<h6 class="subheader" id="academy_inauguration">
			<span>{{academy.inauguration_year.split('T')[0]}}</span>
		</h6>
	</div>
</div>

E aqui o meu botão

<button class="tiny button disabled" id="edit_academy_btn" ng-click="editSelectedAcademy()"
  ng-hide="showSaveEditedAcademy" ng-disabled="button" required ng-init="button=selectAcademy">
 <script type="text/javascript">document.write(edit_btn_text)</script>
</button>

Mas não está a funcionar, alguém me consegue ajudar?

O que estou a fazer mal?

Share this post


Link to post
Share on other sites
taviroquai

Hmm... não conheço bem a AngularJS... não sei se ela faz isso por ti...

Mostra onde está definida a função selectAcademy()

EDIT: acho que já percebi... no bind "click" do academy_panel seria onde podes usar a AngularJS para alterar o estado do elemento edit_academy_btn (acho que também precisas adicionar a propriedade ng-model), mas como estás a fazer bind para essa função selectAcademy() então deves alterar o estado do butão dentro dessa função...

Edited by taviroquai

Share this post


Link to post
Share on other sites
Helio13

A minha função selectAcademy é esta:

$scope.selectAcademy = function (academy, order) {
	console.log("Academy - selectAcademy: " + academy.name);
	$scope.selectedAcademyCountryList = "";
	$scope.selectedAcademy = academy;
	$scope.showInput = false;
	$scope.showSaveEditedAcademy = false;
	$scope.showSaveNewAcademy = false;
	$scope.showInputOnEdit = false;
	$(".academy_panel").removeClass("callout");
	$("#" + $scope.selectedAcademy.id).addClass("callout");
	$("#edit_academy_btn").removeClass('disabled');
	$("#remove_academy_btn").removeClass('disabled');
}

Tipo, eu quando tenho apenas isto no botão

<button class="tiny button disabled" id="edit_academy_btn" ng-click="editSelectedAcademy()"
              ng-hide="showSaveEditedAcademy">
               <script type="text/javascript">document.write(edit_btn_text)</script>
           </button>

Ele fica com outra cor, mais claro, parece disabled e quando carrego num registos ele fica activo, o problema é que ele parece que está disabled mas não está, pois se eu carregar ele funciona na mesma.

Por isso é que estava a tentar fazer algo como o exemplo que indiquei

Edited by Helio13

Share this post


Link to post
Share on other sites
Helio13

Já consegui resolver o problema, lembrei de uma maneira fácil e que resultou

O meu botão pus ele a disabled no inicio

<button class="tiny button disabled" id="edit_academy_btn" ng-click="editSelectedAcademy()"
		   ng-hide="showSaveEditedAcademy" disabled>
			<script type="text/javascript">document.write(edit_btn_text)</script>
		</button>

e depois dentro na minha função no javascript pus o disabled a false

$scope.selectAcademy = function (academy, order) {
	console.log("Academy - selectAcademy: " + academy.name);
	$scope.selectedAcademyCountryList = "";
	$scope.selectedAcademy = academy;
	$scope.showInput = false;
	$scope.showSaveEditedAcademy = false;
	$scope.showSaveNewAcademy = false;
	$scope.showInputOnEdit = false;
	$(".academy_panel").removeClass("callout");
	$("#" + $scope.selectedAcademy.id).addClass("callout");
	$("#edit_academy_btn").removeClass('disabled');
	$("#remove_academy_btn").removeClass('disabled');
document.getElementById("edit_academy_btn").disabled = false; //habilitar;
}

Obrigado pela ajuda

Cumprimentos

Hélio

Edited by Helio13

Share this post


Link to post
Share on other sites
taviroquai

Pois, uma classe de css disabled nao implica que o elemento esteja desativado para responder aos eventos do browser... como nao conheço a forma como a angularjs funciona nao percebi a questao dessa maneira.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.