CODEWITHSUNDEEP
javascriptjquery
user1532468
user1532468

Reputation: 1753

Make input readonly when it loses focus

I am perhaps having some trouble understanding the logic behind what I am trying to do. Basically, when an input '#box_add' loses focus, I display the message and that works fine. However, when I click '#activity1a' it still makes the input readonly and fies the message which is in '#activity'.

Where have I gone wrong with the logic here. Thanks.

// new intake with files selected
    $(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
    $(function() { 
    $("#activity").click(function () {


            $("#box_add").prop('readonly', false);
            $("#box_add").css({'background-color': '#ffffff'});

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

      });
      });

Upvotes: 1

Views: 1425

Answers (1)

Sagar Rabadiya
Sagar Rabadiya

Reputation: 4321

use it like the follow

$(function() {
    $('input').on('blur',function(){
         $(this).attr('disabled','disabled'); //or use readonly
    });
    $('input').on('focus',function(){
        $(this).removeAttr('disabled'); //or use readonly attribute
    });

});

Upvotes: 3

Related Questions