remove readonly from input

问题

I have a pice of code that copy 2 3 divs and the div contains a readonly property.

After that I have a button that says to edit when I click on that button this should remove the readonly and the input field is available to edit.

My code that doesn't work!

my javascript code:

I have tried removeAttr, prop('readonly', false), attr('readonly', false)

  $("body").on("click", ".btn",function(){ 
        if($(this).is("#edit")){
         $(this).parents(".control-group").removeAttr('readonly');
        }else if($(this).is("#save")){

        }else if($(this).is("#remove")){
          $(this).parents(".control-group").remove();
    }
  });

The div that I copy:

<div class="control-group input-group" style="margin-top:10px">
  <input id="rule" type="text" class="form-control" readonly>
  <div class="input-group-btn">
    <button id="edit" class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Edit</button><button id="remove" class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
  </div>
</div>

I hope that when i click on edit the readonly disappear and after a click on save and the readonly back again.

Thanks for the help

PS: the remove button works!

回答1:

You may have better luck with .attr as readonly is an attribute and not a property. See this (Specifically, attributes vs properties)

One issue I see with your code is this line here: $(this).parents(".control-group").removeAttr('readonly');

You are trying to remove the readonly attribute from a div. I think you mean to remove it from your .form-control which is an input

Maybe try $(this).parents(".control-group").find('input.form-control').removeAttr('readonly'); (i'd do some null checks here. Plenty can go wrong if the selector fails)

Here's a basic example of how to toggle the readonly attribute using jQuery

var readonly = true;
$('button').on('click', (e) => {
  readonly = !readonly
  $('input').attr('readonly', readonly);
  // Extra
  if (readonly) {
    $('input').attr('placeholder', "I'm readonly");
  } else {
    $('input').attr('placeholder', "I'm not readonly");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input readonly placeholder="I'm readonly" />
<button>Toggle Readonly</button>

回答2:

You're applying remove to the wrong element.

Try this:

$("body").on("click", ".btn",function(){ 
    if($(this).is("#edit")){
        $(this).parents(".control-group").find('input').removeAttr('readonly');
        }
        ...
    }
});

Using the find jQuery function, you can call every input element inside the .control-group element. To further expand the functionality, say, to include select elements or other buttons (with a unlock-readonly class, for instance), you can try:

$(this).parents(".control-group").find('input, select, .unlock-readonly').removeAttr('readonly');

来源：https://stackoverflow.com/questions/57262173/remove-readonly-from-input

标签

javascript

jquery

input

bootstrap-4