Passar botão de disable para enable

[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?

[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 September 5, 2013 at 10:15 AM by taviroquai

[HappyHippyHippo]

aonde é que estás a alterar o estado do botão ?

[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 September 5, 2013 at 10:41 AM by Helio13

[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 September 5, 2013 at 10:59 AM by Helio13

[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.