Make input readonly when it loses focus

I have 2 radio buttons. '#activity' & 'activity1a'. activity is checked as default on page load. When a user selects the '#activity1a' button, I would like to make an input (#box_add) readonly. When a user selects '#activity', remove the readonly to make it available for input. I have tried various ways and the latest attempt is as the posted code.

What is happening, is that when '#activity1a' is clicked, this does make the input readonly when I lose focus. But, if I click the '#activity' button, it still is readonly and displays the notif msg. It is like it is bypassing the '#activity' code for msome reason.

I would be grateful if someone could point out my nOOb error. Many thanks

jquery code

// new intake with files selected
// THIS CODE WORKS AS DESIRED

$(function() { 
$("#activity1a").click(function () {
			
	$('#box_add').focusout(function(){
	$('#box_add').prop('readonly', true);
	$('#box_add').css({'background-color': '#fafafa'});
		notif({
			msg: "Please Only input 1 box per file submission. Each box will hold approx 20 files. Thank you.",
			type: "boxdstrError",
			position: "center",
			width: 490,
			height: 75,
			multiline: true,
			timeout: 6000,
			opacity: 0.8,
			fade: 10,
		});
	});
			$("#bfile_add").prop('disabled', false);
        
  });
  });

// ordinary box intake
//THIS CODE DOES NOTHING. SEEMS TO BE STILL USING THE CODE ABOVE. THIS CODE SHOULD REVERSE THE CODE ABOVE

$(function() { 
$("#activity").click(function () {
		
		$("#box_add").prop('readonly', false);
		$("#box_add").css({'background-color': '#ffffff'});
		
		$("#bfile_add").prop('disabled', true);
        
  });
  });

Open in new window



html

<div class="fieldset">
            <h1><span>Activity Type</span></h1>
            <p>
              <input id="activity" name="activity" class="css-checkbox" type="radio" value="New Intake" checked="checked" />
              <label for="activity" class="css-label"></label>
              <a href="javascript:void(0)" class="tooltip" title="Choose this option to put new boxes into storage.">New Intake</a>
              <br />
              
              <input id="activity1a" name="activity" type="radio" class="css-checkbox" value="New Intake with Files" />
              <label for="activity1a" class="css-label"></label>
              <a href="javascript:void(0)" class="tooltip" title="Choose this option to put new files into storage together with your box.">New Intake With Files</a>
            </p>
          </div>

<input class="boxadd" id="box_add" name="box_add[]" type="text" required="required" style="width:250px; height:30px;"  />

Open in new window

peter-cooperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

F IgorDeveloperCommented:
Attributes "disabled" and "readonly" are "valueless" attributes, so you need to remove the readonly or disabled attribute to get it working


 
To remove the readonly or disabled attribute you should use

		$("#box_add").removeAttr('readonly');

Open in new window


or

		$("#box_add").prop('readonly',null);

Open in new window


The same for "disabled" property
0
peter-cooperAuthor Commented:
@fraigor
Thx for reply. Made the changes, but unfortunately, still the same issue.  Cannot see why is is still readonly and firing the msg from the first code block. Thanks
0
peter-cooperAuthor Commented:
Thought I would try a change event instead, but still the same freaking issue. Why is this happening? The alerts are firing correctly, so the correct button is being recognised.

$(function() { 

$('input:radio[name="activity"]').change(function(){
        if($(this).val() == 'New Intake with Files'){
	
       alert("new intake with files");
	   
	   $('#box_add').focusout(function(){
	   $("#box_add").prop('readonly',null);
	   $("#box_add").css({'background-color': '#fafafa'});
	   $("#bfile_add").prop('disabled',null);
		notif({
			msg: "Please Only input 1 box per file submission. Each box will hold approx 20 files. Thank you.",
			type: "boxdstrError",
			position: "center",
			width: 490,
			height: 75,
			multiline: true,
			timeout: 6000,
			opacity: 0.8,
			fade: 10,
		  });
		});
	   } else 
      if($(this).val() == 'New Intake'){
	
	   alert("new intake");
	   
           $("#box_add").prop('readonly',null);
	   $("#box_add").css({'background-color': '#ffffff'});
	   $("#bfile_add").prop('disabled',null);
		
	   }
     });
  });

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

leakim971PluritechnicianCommented:
what about : http://jsfiddle.net/shd7qaaq/

$(function() { 
    $(".css-checkbox").change(function () {
        var myBoolean = $(this).is("#activity");
//        $('#box_add').focusout(function(){
            $('#box_add').prop('readonly', !myBoolean);
            $('#box_add').css({'background-color': (myBoolean?'#ffffff':'#fafafa') });
            if(!myBoolean) {
                notif({
                    msg: "Please Only input 1 box per file submission. Each box will hold approx 20 files. Thank you.",
                    type: "boxdstrError",
                    position: "center",
                    width: 490,
                    height: 75,
                    multiline: true,
                    timeout: 6000,
                    opacity: 0.8,
                    fade: 10,
                });
            }
//        });
        $("#bfile_add").prop('disabled', myBoolean);
    });
});

Open in new window

0
peter-cooperAuthor Commented:
@leakim
made a mistake on line 31 of the amended code. Should read:

$("#bfile_add").prop('disabled',true);

Open in new window


Will this make a difference to your code. Thanks
0
leakim971PluritechnicianCommented:
no, myBoolean is true or false depending whihc radio has been clicked
0
peter-cooperAuthor Commented:
@leakim
Unfortunately, it isn't working for me. When I click the 'new intake with files' button, it immediately fire the msg and makes the input readonly before it gains focus. I used your code exactly as is. Thanks
0
peter-cooperAuthor Commented:
@leakim
Your fiddle does the same. Makes it readonly before any data can be entered. Need to make it readonly after a user has finished typing or left the input. Thanks
0
leakim971PluritechnicianCommented:
if the user is typing and click on the radio button, the textbox left focus which mean the user finished typing, right ?
0
leakim971PluritechnicianCommented:
wht about : http://jsfiddle.net/shd7qaaq/1/
// new intake with files selected
// THIS CODE WORKS AS DESIRED

$(function() { 
    $(".css-checkbox").change(function () {
        var myBoolean = $(this).is("#activity");
        if($.trim($("#box_add").val())!="") {
            $('#box_add').prop('readonly', !myBoolean);
        }
        $('#box_add').css({'background-color': (myBoolean?'#ffffff':'#fafafa') });
        if(!myBoolean) {
                notif({
                    msg: "Please Only input 1 box per file submission. Each box will hold approx 20 files. Thank you.",
                    type: "boxdstrError",
                    position: "center",
                    width: 490,
                    height: 75,
                    multiline: true,
                    timeout: 6000,
                    opacity: 0.8,
                    fade: 10,
                });
        }
        $("#bfile_add").prop('disabled', myBoolean);
    });
    $("#box_add").blur(function() {
        if($.trim($("#box_add").val())=="") {
            $(this).prop('readonly', false);
        }
    });
});

function notif(obj) {
    alert(obj.msg)
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
peter-cooperAuthor Commented:
@leakim

What is happening with your code is that the msg is being displayed as soon as the user clicks the 'New Intake With Files' button. Ideally, what I wanted to happen, is when the the user finishes typing, it triggers the msg then sets the input as readonly.

If the user then clicks the 'New Intake' button, this then resets the input back to normal for further input and no msg is displayed. Hope that is clearer for you. Thanks
0
peter-cooperAuthor Commented:
Thank you
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.