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

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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

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
leakim971PluritechnicianCommented:
no, myBoolean is true or false depending whihc radio has been clicked
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
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
leakim971PluritechnicianCommented:
if the user is typing and click on the radio button, the textbox left focus which mean the user finished typing, right ?
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

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
peter-cooperAuthor Commented:
Thank you
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.