-1

I have multiple columns that are being displayed on the page. I wanted to add check boxes so the specified row can be edited based on selection. However there is a problem, because I am not able to edit the box that is checked.

For instance: 

box       | ID | Date
checked   | 1  | 11/20/18  <-- this should be editable
unchecked | 2  | 11/15/18  <-- this should just be displayed

JavaScript / Jquery: 

  $(".id").on('click', function (e) {
        var key = "#date-" + e.target.id;
        var check = "#" + e.target.id;
                if ($(check).attr(':checked')) {
                    $(key).removeAttr("readonly", false);
                    $(key).focus();
                } else {
                    $(key).attr("readonly", "readonly");
                }
            });

HTML: 

 @foreach (var item in Model)
    {
       <td><input class="id" type="checkbox" id=@item.ID/></td>
       <td>@Html.DisplayFor(x => item.ID)</td>
       <td><input id='@item.ID' type="text" value='@item.Date' readonly="readonly" /></td>
     }

Any help would be appreciated!

caitlinp
  • 183
  • 13
  • https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page Don't repeat ids. Use a class instead – Taplar Nov 20 '18 at 21:35
  • Uour have duplicate `id` attributes which is invalid html. And `$("#date")` selects the first element with `id`. Use a class name and relative selectors (relative to an enclosing parent element) –  Nov 20 '18 at 21:35
  • Refer [How can i get h3 tag text value in jquery?](https://stackoverflow.com/questions/41789213/how-can-i-get-h3-tag-text-value-in-jquery/41789255#41789255) for an example –  Nov 20 '18 at 21:37
  • @StephenMuecke tried that, but still stuck on the same issue. – caitlinp Nov 21 '18 at 14:36
  • @caitlinp remove readonly="readonly". That will make your textbox exactly what it says (read only as in not editable).https://www.w3schools.com/tags/att_input_readonly.asp – Jabberwocky Nov 21 '18 at 16:23
  • That doesn't change anything.. I was debugging through it, the problem is that it never reaches: 'if ($(key).attr("checked") == "checked")' this line.. – caitlinp Nov 21 '18 at 16:27
  • @Jabberwocky I lied, it actually changes a little bit.. I am able to edit the date before even clicking on the checkbox.. Once checked, I can't edit it.. – caitlinp Nov 21 '18 at 16:52
  • @caitlinp I think it's because in your if statement you have $(key).removeAttr("readonly", false). If I remember correctly it dosn't take a second parameter (as in 'false' in this case). Does it work if you do $(key).removeAttr("readonly")? https://api.jquery.com/removeAttr/ only setting an attribute through jquery takes a second parameter, not removing it. Removing takes only one parameter. also, if that doesn't work use .prop() – Jabberwocky Nov 21 '18 at 16:55
  • @caitlinp Now that I'm reading your code again, if I'm correct you want to make the textbox readonly if it's checked. Right now your code tries to make it editable if the textbox is checked and readonly if the textbox is not. I think you need to reverse the if else on the attr part and also I think my previous comment still stands on the removeAttr taking one parameter, not two. – Jabberwocky Nov 21 '18 at 17:12
  • @Jabberwocky I fixed that issue and posted the code edits. However I need to fix the date issue haha.. It's showing me the date and the time. I only need to see the date.. – caitlinp Nov 21 '18 at 17:18
  • @caitlinp So, the questions have been answered? If so, you should not be changing the question. The question remains that you can't see if it's checked or not. If it's answered, mark the answer as correct and maybe post another question on stack overflow. – Jabberwocky Nov 21 '18 at 17:22
  • Then you did not do it correctly - refer [this working fiddle](http://jsfiddle.net/tafzjkoh/) –  Nov 21 '18 at 22:02

1 Answers1

1

I could not test but, i thik this is very close answer to your approach...

using prefix and checkboxs' id together for identification, 

 @foreach (var item in Model)
{
    <td><input class="id" type="checkbox" id='@item.ID' /></td>
    <td>@Html.DisplayFor(x => item.ID)</td>
    <td><input id='date-@item.ID' type="text" value='@item.Date' readonly="readonly" /></td>
}


 $(".id").on('click',function(e){
          var key= "#date-"+ e.target.id;
            if ($(key).attr("checked") == "checked") {
                $(key).removeAttr("readonly", false);
                $(key).focus();
            } else {
                $(key).attr("readonly", "readonly");
            }
        }
 );
kanpinar
  • 143
  • 10