如何使用jQuery的prop函数获取文本框的值

Question

i am trying to get a value of some text box but its not working , more over the prop function isnt working also . All i want is to enable the elements when the checkbox is checked and then show the value inside the textbox in alert window

Link to jsfiddle --> http://jsfiddle.net/k0cfj48L/5/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
    <tr>
 <td class="td" bgcolor="#CCCCCC"> <input type="text" class="chkEdit" disabled /></td>

 <td class="td" bgcolor="#CCCCCC"> <input type="checkbox" class="chkView" value="Edit" /></td>

 <td class="td" bgcolor="#CCCCCC"> <input type="submit" class="chkUpdate" onclick="check();" disabled /></td>
    </tr>
</table>

JS:

$(document).on('change','.chkView',function(){
    var row = $(this).closest('tr');
    if($(this).is(':checked')) {          
        $(row).find('.chkEdit,.chkUpdate').prop("disabled",false); 
        //var x = $(row).find('.chkEdit').val();   
    }else{
        $(row).find('.chkEdit,.chkUpdate').prop("disabled",true);     
    }
});

/////////////////////////////////////////////////////////
function check()    {
    var row = $(this).closest('tr');
    var x =$(row).find('.chkEdit').val();
    alert(x);
    return ;
}

The jsfiddle is edited the enable function is working but i still cant get the alert

Answer 1

http://jsfiddle.net/k0cfj48L/2/

I have fixed your fiddle.

1) JQuery was not included, so '$' in $(document).ready() was not defined.

2) I changed the JS to be included in the head so your check function is read as defined on execution of the page.

3) Your check function is not being instantiated directly within an event, so $(this) does nothing, rather is just a window reference. I incldued a proper selection of the textarea, but I'd consider using IDs or adding a jQuery event on the submit button and then finding a sibling:

$(document).on('change','.chkView',function(){
    var row = $(this).closest('tr');
    if($(this).is(':checked'))
    {          
        $(row).find('.chkEdit,.chkUpdate').prop("disabled",false); 
        //var x = $(row).find('.chkEdit').val();   
    }
    else
    {
        $(row).find('.chkEdit,.chkUpdate').prop("disabled",true);     
    }
});

/////////////////////////////////////////////////////////
function check()    
  {
      var x = $('.chkEdit').val();
       alert(x);
       return ;
  } 

Answer 2

jsFiddle demo

in your HTML pass the this reference as fn argument!

onclick="check(this);"

^{Disclaimer of liability : I'm not suggesting to use inline JS at all - read further!}

than in jQuery:

$(document).on('change','.chkView', function(){  
    $(this).closest('tr').find('.chkEdit, .chkUpdate').prop("disabled", !this.checked);    
});
/////////////////////////////////////////////////////////
function check(el){ // `el` is the `this` element argument you've passed in HTML
    var x = $(el).closest('tr').find('.chkEdit').val();
    return alert( x );
}

---

Also instead of using lnline JS (inside HTML) which makes programmers life really hard,
do it all in JS! jsFiddle demo

$('.chkUpdate').on("click", function(e){
    e.preventDefault();
    var x = $(this).closest('tr').find('.chkEdit').val();
    alert( x );
});

Note that if your table is created dynamically you might want to use the dynamic event delegation like:

$('.someNotDynamicParent').on("click", ".chkUpdate", function(e){