1

I have an index page where I have a Create Button. On click of the create button it opens a new view called CreateStudent View where i have multiple bootstrapp tabs. Each tab contails a button on it. Index view : Button

<div class="row">
    <div class="col-md-6 text-right"><a class="btn btn-default CreateMe" href="/MyProject/StaffCreate" role="button">Create New</a></div>
</div>

And the CreateStudent View has a button LogOnAdd on one of the tab:

<div class="row">
    <div class="col-md-8 text-right">
        <a class="btn btn-default LogonAdd" id="LogonAdd" href="#" role="button">Add </a>
    </div>
</div>

Using the below jquery I an trying to disable the LogOnAdd button. 

$('.CreateMe').click(function () {
    $(".LogonAdd").attr("disabled", true);
});

But the above jquery code is not working. The button is not getting disabled. Can some body guide me what mistake I have made in the jquery.

I am using vs 2010 and mvc4 .

I doubt whether it is failing to find the control.

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
jubi
  • 569
  • 1
  • 10
  • 34
  • Try to take a look [here](http://stackoverflow.com/questions/15122526/disable-button-in-jquery/33696585), the question seems similar to yours. – prtnkl Mar 07 '16 at 15:02
  • Not a duplicate as it talks about button on same page – jubi Mar 08 '16 at 12:04

2 Answers2

2

The disabled attribute work just on <input> tags. you could not use it with anchor it will make no effect.

Since you're using bootstrap the disabled attribute will works on anchor with role='button' it should be true :

$('.LogonAdd').attr("disabled","true"); 
//OR
$('.LogonAdd').attr("disabled","disabled");

NOTE : That will not work in your current context since you're trying to disable an element that is not in the current page.

So if i'm realy understanding the other buttons are in the same page just in different tabs. if this is the case you could disable the buttons in other tabs by default (in html code), then enable them when you click in the save button in first tab.

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
  • Still it is enabled. – jubi Mar 07 '16 at 14:58
  • anchor isn't input, `disabled` boolean attribute has no effect on it – A. Wolff Mar 07 '16 at 15:01
  • Am i finding the button in right way. – jubi Mar 07 '16 at 15:01
  • tried $('.LogonAdd').attr("disabled","disabled"); but not working – jubi Mar 07 '16 at 15:02
  • _need to disable is in another page._ @jubi that not possible and that is the problem, JS can just deal with current DOM and not other pages DOM. – Zakaria Acharki Mar 07 '16 at 15:10
  • Oh!!Noo. So in my case can you suggest any work around. I wanna disable the buttons in all the other tabs until i save the details in the first tab , my first tab save generates an id.Other tab buttons should be disabled until i generate the id.once i click on Save from first tab i want to enable the button also.is there any way of achieving this – jubi Mar 07 '16 at 15:14
  • So if i'm realy understanding the other buttons are in the same page just in different tabs. if this is the case you could disable the buttons in other tabs by default (in html code), then enable them when you click in the save button in first tab. – Zakaria Acharki Mar 07 '16 at 15:20
2

Try this, add a class to your anchor tag when you want to disable it, and in css you can set the mouse events to do nothing on it, Here

$('.CreateMe').click(function () {
    $('.LogonAdd').addClass('disabledLink');
});

And CSS

a.disabledLink {
  pointer-events: none;
}

To enable the link again just remove the class.

$('.LogonAdd').removeClass('disabledLink');

Edit 1: Since you said you have to disable a button which is another view but handle the disabling stuff in current view you can do this, Set a variable to say if the button has to be disabled or not, on page load of the second view run the jquery script to check this value and toggle the link state. Here's a code snippet

$('.CreateMe').click(function () {
  localStorage.setItem('disableLogOnAdd', true); //set
});

On the document ready event of the second page do this,

if(localStorage.getItem('disableLogOnAdd')){
  $('.LogonAdd').addClass('disabledLink');
}

Note, Keep the css rule to remove the pointer events as mentioned above.

Rajshekar Reddy
  • 18,647
  • 3
  • 40
  • 59