JQuery禁用下一个选择

Question

On .mSubIndex being changed to 1, I want to disable the next select box. The following code is not working. I'm having a problem addressing the select element - not sure whether it's anything to do with it being in a table

echo "<form action='menu-add.php' method='post'>";
echo "<tr>";
echo "<td><input name='mIndex' value=''></td>";
echo "<td><input name='mSubIndex' class='mSubIndex' value=''></td>";
echo "<td><input name='mTitle' value=''></td>";
echo "<td class='pag'>";
echo "<select name='pageName' class='pageName'>";
echo "<option value='0'>Please Choose Page</option>";
  foreach (glob('../*.php') as $pageFile) {
    $pageFile = substr($pageFile, 3);
    echo "<option value='".$pageFile."'>".$pageFile."</option>";
  }
echo "</select>";
echo "<td><input type='submit' name='submitAdd' value='Add'></td>";
echo "</td></tr>";
echo "</form>";
echo "</table>";
?>
<script>
$(document).ready(function() {
  $('.mSubIndex').on('input',function() {
  var $this = $(this)
  if ($this.val()==1) {
  $this.closest('form').find('.pageName').prop('disabled','disabled')
   }
 })
})
</script>